Chrome 开发者工具

系统学习 chrome 开发者工具，将这把利刃的威力发挥到极致。官方文档地址：
https://developer.chrome.com/devtools/index

JavaScript 调试

具体请看 Google 的官方文档，或者直接打开开发者工具的 sources 栏也能很快熟悉绝大部分功能。这里阐述一些你可能会忽略的小细节：

• DOM 树变动时设置断点

可以为某一个节点变动时设置一个断点，具体包括 DOM子树变化时，属性变化时，被移除时，操作如下图：

屏幕快照 2014-08-07 16.45.22.png

• 函数查找

在 sources 界面下，快捷键 cmd+shift+o 能够实现函数查找。如下图：

houseMouseOut.jpg

• 函数调用堆栈链调试

当我们设置一个断点时，我们在 console 里面的运行环境就是此时断点所在的环境，但是我们还可以跳到此时函数调用的堆栈的每个函数中去，极其方便的查看该作用域中的情况。一图胜千言：

console-scope-time-travel.gif

• 继续和长继续

我们在一个断点的时候，能够通过点击继续按钮，让代码继续进行，但是还有一个长继续的功能，这个功能是在 0.5 秒内任何断点都通过。这样的好处是，能够让我们暂时不管其他断点，专心处理一些类似于事件函数里的断点。如图：

long-resume.png

• 异常被抛出的堆栈 stack

每个异常被捕获时会有一个 stack 的属性，能过获得异常被抛出时堆栈的信息。如图：

error-stack.jpg

控制台

• 清屏

通过 clear() 和 console.log() 可以实现控制台清屏，不过推荐快捷键 command + k 和 control + l 来清屏（和 mac 终端清屏是一样的）。

• 打印 ajax 请求和保留上一页面 console 的信息

通过右键的选项，我们可以设置控制台打印出每一次 ajax 请求的信息和保留上一页面 console 的信息。

console-context-menu.png

• console.asset