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

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

在实际工作过程中相信你可能会遇到这种情况,想要修改某个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

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

断点调试中控制台此时作用域是当前断点的作用域 感兴趣的同学可以试试 这里就不附图了
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容