智玩网 智能科技

chrome网页调试js

chrome调试for js

1.代码格式化。一般情况下上线前 js 文件在都会压缩一下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Sourse 面板下面打开一个压缩的js文件,会有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化, 方便设断点,提高可读性。

2.查看元素绑定事件。在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

3.Ajax 时中断。在 Sourse 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

4.页面事件中断。除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Sourse 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件。

版权说明:文章均为账号作者发布,不代表本网站观点与立场,如有侵权请联系我们删除