chrome developer tool 调试技巧

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的，因为 google 也在不断完善chrome developer tool，所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的，mac 下的应该大同小异。

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了。

1. Beautify Javascript

js 文件在上线前一般都会压缩下，压缩的 javascript 几乎没有可读性，几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {})，点击会将压缩 js 文件格式化缩进规整的文件，这时候在设定断点可读性就大大提高了。

2. 查看元素绑定了哪些事件

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

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的，点击文件名会直接跳到绑定事件处理函数所在行，如果 js 是压缩了的，可以先 Pretty print 下，然后再查看绑定的事件。

3. Ajax 时中断

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

4. 页面事件中断

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

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关，有两种模式：在所有异常处中断，在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了。

标签： 前端技术 chrome调试工具 chrome-developer-tool 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。