可以将被压缩的代码自动展开
实时代码编辑
可以在运行时动态改变 JS 代码，并且不需要刷新页面就可以看到效果，一般用这个实时的在代码里插 console.log
DOM 事件/XHR 断点
可以针对 DOM 结构改变/属性改变/键盘鼠标事件 等下断点，直接断到事件的第一个 listener 函数上。还可以对 XHR 请求下断点，断到发起请求的那一行代码上
调用栈分析
这个非常常用，Scripts 面板下右上角的那一部分
自动异常断点
当代码执行出错时，可以自动断到出错的代码行上，直接分析出错时的运行时环境
分析 HTTP 请求
Network 面板下列出了所有的 HTTP 请求，可以很方便的查看请求内容、HTTP 头、请求时间等信息
以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找
到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了，但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM
事件断点和 XHR 断点 进一步往上找哪个函数出错。另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network
面板查看请求的参数、Cookie、HTTP 头是否有误。
另外，还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上，免去了代码格式化的麻烦，还可以直接编辑。
还有些比较小的 Tips:
console.group/console.groupEnd 可以将 log 信息分组展示，看起来更舒服
console.warn/console.error 可以输出 warning 和 error log
element 面板右侧实时编辑的 css 样式，可以在 resource 面板里保存起来
关于样式还有个技巧，Elements 面板右上角的 styles 栏，右侧有三个图标，功能依次是：根据当前元素创建一个 css 样式、模拟 :hover/:active 等伪类、颜色值类型选择。实用
resource 面板可以删除和修改 cookie/localstorage
scripts 面板下的 ctrl+o 可以快速跳转脚本文件，ctrl+shift+o 快速跳转函数
右下角的齿轮图标里有个选项是开发者工具和网页左右分屏（Dock to the right，默认是上下分屏），宽屏必备
接上，还有个选项是禁用 Cookit，必点
接上，在选项面板里还可以手工编辑 user agent 和模拟触摸事件
最后说说 IE 6 的调试，我是这么个流程：
首先尝试在 Chrome 下重现该 Bug，如果能重现，就先把 Chrome 里能重现的 Bug 修了。确定 Chrome 里 OK，但是 IE 6 有问题，再继续下一步
到
IE 里首先尝试高版本 IE，比如 IE 9。E 9 的开发者工具还不错，也可以下断点，调用栈分析、控制台样样都有。如果 IE 9
里没问题，那就继续尝试 IE8，一直定位到能重现该问题的最高版本的 IE 上。即使是 IE
7，其开发者工具也还是勉强能用的……如果不幸的碰上一个 IE 6 only 的 Bug，那就只有继续下一步
到这一步的话一般就是
最苦逼的时刻。IE 6 实在是没有太好用的 JS 调试工具（据说 Visual Studio
可以调，我没用过，欢迎补充）。这时候一般就是二分+alert的土法定位到出错行，加上耐心和时间，还有一点点运气。这一步的话强烈推荐开
Fiddler。
1. debugger
我以前也说过，你可以在JavaScript代码中加入一句debugger来手工造成一个断点效果。
需要带有条件的断点吗？你只需要用if语句包围它：
if (somethingHappens) {debugger
}
但要记住在程序发布前删掉它们。
2. 设置在DOM node发生变化时触发断点
有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。
谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。
断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。
3. Ajax 断点
XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，在特点的Ajax调用发生时触发它们。
当你在调试Web应用的网络传输时，这一招非常的有效。
tumblr_inline_n1s7ceQ08c1r2
4. 移动设备模拟环境
谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。
找到它的方法是：按F12，调出开发者工具，然后按ESC键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。
当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。
tumblr_inline_n1s71kb2NL1r2
5. 使用Audits改进你的网站
YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。
它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。
