chrome developer tool 调试技巧

转自：淘宝UED

1. Beautify Javascript ~~ js反压缩 js美化

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

2. 查看元素绑定了哪些事件 ~~如果事件是通过jQuery之类的框架绑定的不那么明显能查看到，js框架一般有自己的事件缓存机制

　　在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件，展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

3. Ajax 时中断 ~~这个可调试跟踪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 异常时中断 ~遇到什么样的异常中断JS

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

6. DOM Level 3 Event 事件中断 ~不常用

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

7. 所有 js 文件中查找 ~~在所有加载文件中，查找关键字非常实用

　　在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式

8. command line api ~~原来控制台本身也有定义$, $$ console是一个功能丰富的对象，console.log(console) 可查看 console的方法函数， console.clear()清屏

$(id_selector) 这个与页面是否有 jQuery 无关
$$(css_selector)
$0, $1, $2, $3, $4
1. Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
2. 这个 5 个变量时先进先出的
copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
monitorEvents(object[, types])/unmonitorEvents(object[, types])
1. 当 object 上 types 事件发生时在 console 中输出 event 对象
更多 console api 请 console.log(console) 或点击
更多 command line api 点击

9. 实时修改 js 代码生效 ~~修改js代码并保存后可在console面板触发函数执行看修改后的结果

页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
注意
1. 经测试不支持 html 页面中 js 修改
2. 经过 Pretty print 格式化的脚本不支持修改

10、Console
Chrome的Console也是比较强大的。它同时实现了Firebug的Command Line API，这个可以去看看Command Line API的文档，我就
不赘述了。而且会出现智能提示，这个是非常强大的。我们在Console中可以直接写JS运行，不用
为了几句简单的js就动用html文件。

另外Console还支持一些方法，如下:
console.log(object[, object, ...])，使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。
console.info(object[, object, ...]) ，向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。
console.error(object[, object, ...])在控制台中输出一条错误信息。
console.warn(object[, object, ...])在控制台中输出一条警告信息。
console.assert([, object, ...]) ，断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。
console.dir(object) 输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。
console.dirxml(node) 输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。
console.trace() 输出 Javascript 执行时的堆栈追踪。
console.group(object[, object, ...]) 输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块
的输出。
console.time(name) 计时器，当调用 console.timeEnd(name);并传递相同的 name 为参数时，计时停止，并输出执行两条语句之间代
码所消耗的时间（毫秒）。
console.profile([title]) 与 profileEnd() 结合使用，用来做性能测试，与 console 面板上 profile 按钮的功能完全相同。
console.count([title]) 输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。
console.clear() 清空控制台。

11. console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, （~~ //@ sourceURL=file.js 注意空格）会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了,可以方便地进行编辑和设置断点。

-----------------------------

5、Timeline
Timeline在分析网页性能的时候非常有用。这个跟Network有类似的地方，他们都是按照页面的加载时间来统计数据的，不过Timeline
统计的数据侧重点不一样。Timeline主要统计了三个数据：Loading，Scripting，Rendering。另外一个是内存随时间的变化。

蓝色的是加载的时间，黄色的是代码执行的时间，紫色的是渲染的时间。当我们点击底部的那个黑色的圆形时，圆形变成红色，然后
就开始记录页面中出现的这三种情况所消耗的时间。当点击记录按钮之后刷新页面，我们就能得到整个页面加载，代码执行，还有页
面渲染的时间细节。鼠标移到右边栏的时间条上，还会出现相应的具体信息，也可以点击三角按钮查看折叠的信息。顶部的时间栏可
以拉动进行缩放，这样就能关注具体某段时间内的信息了。

6、Profiles
Profile记录的主要是CPU和内存占用的信息。

点击start profiling，开始记录CPU的使用信息，这时刷新页面，等页面加载完毕之后仍点击上一次的按钮，停止记录。CPU记录的信
息以两种视图呈现：Bottom Up和Top View。

Bottom Up和Top Down显示的是一个全局的调用栈结构图，只是显示的方式略有不同。当我们展开一列函数的时候，可能看到如下的
情形。如果是Bottom Up视图，从字面的意思来理解是从下往上，在下面的函数调用的是上面的函数，跟函数的调用栈类似。

同样的Profile，如果是Top Down视图，就会是下面的情况，函数的调用自上而下的，而且只会显示在全局作用域中调用的函数（不是
全局作用域的函数都是被其他函数所调用）。这里可以查看各个函数的调用栈还有它们的执行时间，例如图中出现了多个p，那么函
数p就是递归调用。

另外几个按钮：Switch between absolute and percentage times、Focus selected function、Exclude selected function，从字面意思也

可以了解它的用途了。
上图的左边两列是时间，第一列是self，第二列是total，self表示函数自己的运行时间，不包含调用其他函数的时间，而total表示这个
函数运行的总时间。因为这个性能分析会系统造成一定的影响，所以得到的结果并不是特别的精确，通常情况我们只比较一个相对的
结果来得到性能差的函数就行了。所以可以将时间转换为百分比的关系。
剩下还有一个是Heap Snapshots，字面意思是堆快照。通过点击右下方的眼睛图标按钮就可以给当前的Heap截取一个快照，旁边禁
止图标的按钮是清除profiles，因为即使退出了开发人员工具，profiles还会继续存在，直到关闭页面或手动清除。下图就是一个快照.

总体分为左右两栏，右边栏又分为上下两部分，上面部分分为4列：Constructor、#、Shallow Size、Retained Size。Constructor显示
的是构造函数，也可以说是类，#表示的是相应类有多少实例。Shallow Size表示对象自身所占用的内存。而Retained Size表示对象以
及它所引用的对象所占用的内存，也可以理解为对象被回收能够释放的内存的总大小。对于GC（garbage collector）来说，如果一个
对象没有任何引用，那么这个对象就是可以回收的。如果a对象包含了b对象的引用，如果a对象没有被回收，那么b对象也不会被回
收，如果a被回收，那么b也被回收。这时a自身的大小称为Shallow Size，a+b的大小称为a的Retained Size。注意a被回收，b也被回
收，那么a就是b的Dominator。
下部分显示的是Paths from the selected object to GC roots/to window objects，也叫Retaining path。如果选择了一个对象，如果它没
有被回收（当然，出现在Snapshots中的都是没有被回收的对象），那么它对于GC来说是可读的，GC可以通过某一条路径来达到这
个对象，而下面一部分就是显示的这个路径。选择对象之后，GC roots就开始寻找roots到这个对象的短路径。这个有点复杂，需要对
图数据结构有一定了解。
Heap Snapshots可以用四种方式来查看：Summary、Comparison、Containment、Dominators。Summary是默认的显示方式，会显
示Constructor和实例。Comparison是对比的方式来显示，可以看到每个实例后面都有一个@xxx的东西，以@开始的一串数字就是每
个实例特定的id，这个id是独一无二的。如果我们截取了两个快照，以Comparison的方式显示，就会出现两个快照不同的地方，例如
这样的场景：用户点击一个按钮之后利用XHR对象加载了一条信息。加载之前截取一个快照，加载之后再截取一个快照。对比两个快
照，如果出现了XHR对象，那么说明此对象没有被回收，如果每次加载都创建一个XHR对象，而且此对象不会被回收，那么理论上就
可以能引起内存泄露。
Containment视图显示了页面中对象结构的概览。一共会有四种对象:DOMWindow、GC roots、Native Objects。如果页面中有框架
(frame)，那么可能会出现过个DOMWindow对象。Native Object，原生对象，是指那些被嵌入Javascript的对象,例如DOM和CSS
Rules。Dominators视图显示的是Dominators tree，这个在前面有提过，就不说了。

7、Audits
这个是对页面的一个优化建议，跟YSlow比价相似，就不细说了。

----------------------------------

command line api (for firebug, chrome实现了firebug command line 大部分的api)

刷新页面返回顶部