Chrome 开发者工具使用技巧

JavaScript Beautifier

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

 

查看元素绑定了哪些事件

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

 

AJAX 时中断

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

 

页面事件中断

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

 

JavaScript 异常时中断

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

 

DOM Level 3 Event 事件中断

在 Elements 面板，选中一个元素右键，有两个选项：Break on subtree modifications、Break on attributes modifications。这两个对应 DOM Level 3 Event 中的 DOMSubtreeModified，DOMSubtreeModified 事件 在 Sources 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断。

 

在所有资源中搜索

在 Chrome 开发者工具打开的情况下，按 Ctrl + Shift + F，则可以在所有资源中查找内容（其支持字符串和正则表达式两种形式）。

 

查找 JavaScript 文件

 

Ctrl + o  (在 Sources panel 下)。

 

查找 JavaScript 函数

Ctrl + Shift + o  (在 Sources panel 下)。

 

Command line API

 

● $(id_selector) //这个与页面是否有 jQuery 无关。

● $$(css_selector)

● $0, $1, $2, $3, $4 //Elements 面板中最近选中的 5 个元素，最后选择的是 $0。

● copy(str) //复制 str 到剪切板，在断点时复制变量时有用。

● monitorEvents(object[, types])/unmonitorEvents(object[, types]) //当 object 上 types 事件发生时在 Console 中输出 event 对象

 

Console 中执行的代码可断点

在 Console 中输入代码的最后一行加上 //@ sourceURL=filename.js，会在 Scripts 面板中有个叫 filename.js 的文件，然后他就和外部 js 文件一样了。

 

控制台多行输入

 

Shift + Enter 即可换行。