调试鼠标经过显示鼠标移开元素消失的元素
在实际工作过程中相信你可能会遇到这种情况，想要修改某个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
用好断点调试在开发过程中效率将会大大提升
最后提一个需要注意的点
