chrome 调试小技巧

1.元素的选择（`cmd+shift+c`）

2.选取颜色，改变颜色表示的方式

2.对元素添加属性，编辑，复制，移动，设置断点

 

2.1 有时候我们需要监听某个 DOM 被修改情况，那么可以在元素上设置断点。

 在元素上可以设置三种断点：（1）子节点修改（2）自身属性修改（3）自身节点被删除。

3.强制元素状态

4.查看元素绑定的事件

二， Source面板设置断点

1.常用的快捷键

类似与sublime的查找文件，chrome 中 `cmd+p`（win上 `ctrl+p`）也可以查找文件。

文件中定位方法，`shift+cmd+o`（win上`ctrl+shif+o`）,可以快速的查找文件中的方法。

文件中搜索字符串，`cmd+f`（win上`ctrl+f`）

全局搜索字符串，`option+cmd+f`（win上`ctrl+shift+f`）

2.在源代码上设置断点

添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。如果有多个文件、多个断点的话，利用 Breakpoints 列表中的断点快速定位非常方便。

条件断点：在断点位置的右键菜单中选择“Edit Breakpoint...”可以设置触发断点的条件，写一个表达式，表达式为 true 时才触发断点。

XHR断点：右侧调试区 XHR Breakpoints，点击+ 并输入 URL 包含的字符串就可以监听该 URL 的 Ajax 请求。如果想监听所有 XHR 请求，可以什么都不填。一旦 XHR 调用触发时就会在 request.send() 的地方中断，可以查看函数调用栈分析。

3.查看变量

在代码执行到断点停下来后，我们可以单步执行代码，查看变量。这些变量会被记录在全局，可以在控制台中打印出来。

4.查看调用栈

调用栈中的每一层叫做一个 frame，点击每个 frame 可以跳到该 frame 的调用点上。而且，还可以在 frame 上用右键菜单重新开始执行当前 frame。有利于不断的重复调试，不用重复刷新。

5.临时修改 JavaScript 代码

通常我们在调试代码时是这样做的：修改代码→刷新页面→重新检查。但其实 Chrome 中可以临时修改 JS 文件中的内容，保存（Ctrl+S）就可以立即生效，结合 Console 等功能就可以立即重新调试了。