系统学习 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
