今天才发现chrome调试前端尤其是JS真是很方便，难怪之前公司几个前端高手都用chrome的开发者工具来调试。把今天知道的chrome调试方法收集整理一下，在今后的开发调试中都可能会用到：
Profiles，可以记录JS函数和CSS选择器对CPU的占用，以及内存占用时间线。用来找出影响性能的瓶颈非常有帮助。Timeline，可以记录浏览器渲染的每一帧里发生了什么，从js执行，css reflow到画面repaint，各自占用多少时间。可以帮助你定位是什么导致动态效果的帧数不流畅。
element 面板右侧实时编辑的 css 样式，可以在 resource 面板里保存起来。
以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了，但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。原文：http://www.cnblogs.com/doit8791/p/3539852.html