浏览器开发者工具调试技巧

调试鼠标经过显示鼠标移开元素消失的元素

在实际工作过程中相信你可能会遇到这种情况，想要修改某个ui框架自带样式，可是不巧你想要修改的元素鼠标经过时显示，鼠标移开是就消失了F12开发者工具element中捕捉不到，其实这种情况是可以被捕捉到的下面介绍捕捉方法
首先在你要调试的页面打开f12切到sources选项如下图所示

image.png

然后进入你要调试的页面鼠标移入 你想要显示的元素如下图

image.png
等到元素显示出来按下F8 此时页面结构就会被定格
然后你就可以愉快的调试 你想要捕捉的元素了

控制台方法

• 控制台中复制
  在断点调试中可能想复制某个变量的值只需要 将鼠标移到该变量身上 点击右键 点击右键菜单中的 add selected text to watches 然后控制台的右边就会出现一个变量被监听点击右键 然后点击 Store as global variable 就会在控制台中生成一个零食变量temp1 然后直接调用 copy(temp1) 这个变量就复制成功了

  
  image.png
  image.png

• 获取元素在控制台中操作
  打开F12 elements 随便点击一个元素 然后再控制台中调用$0 便可以获取到刚刚点击到的元素了 此时你就可以做你想要的操作了

  
  image.png

断点调试

可以在浏览器中对应位置打断点 也可以在代码中 写debugger打断点 这样代码运行就会停留在改断点处

image.png
image.png

用好断点调试在开发过程中效率将会大大提升
最后提一个需要注意的点

断点调试中控制台此时作用域是当前断点的作用域 感兴趣的同学可以试试 这里就不附图了