web浏览器调试

Posted 2020-09-11

一、chrome浏览器

01 css、html的调试

1.ctrl+shift+c 可选择页面上的元素节点

2.选中节点后可以 F2 直接编辑html

3.添加类名功能，新建类名样式功能

4.隐藏元素功能

 

02 js调试

在sources页面里进行操作

<1>断点后的执行包括

1.不进入函数内部的下一步

2.进入函数内部的下一步

3.跳出当前函数

 

4.不激活断点/激活断点，可通过打对勾来减少断点，也可以右键删除断点

<2>打印异常

点击，并选择在异常位置暂停后，js会在在异常的位置停止执行并打印错误

若不选择在异常位置暂停，则会继续执行，但会打印错误

<3>ctrl+shift+f 在所有文件里查找 

<4>点击对应js文件下的{}可以格式化压缩的js

03事件监听的调试

先选中被监听元素，打开sources选项 选择右侧的Event Listener Breakpoints,其中mouse里有click等一系列事件，点击后即在触发事件时断点生效