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 即可换行。
?
