2014第6周五JS调试

今天才发现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 头是否有误。
另外，还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上，免去了代码格式化的麻烦，还可以直接编辑。

• 代码格式化
  可以将被压缩的代码自动展开
• 实时代码编辑
  可以在运行时动态改变 JS 代码，并且不需要刷新页面就可以看到效果，一般用这个实时的在代码里插 console.log
• DOM 事件/XHR 断点
  可以针对 DOM 结构改变/属性改变/键盘鼠标事件 等下断点，直接断到事件的第一个 listener 函数上。还可以对 XHR 请求下断点，断到发起请求的那一行代码上
• 调用栈分析
  这个非常常用，Scripts 面板下右上角的那一部分
• 自动异常断点
  当代码执行出错时，可以自动断到出错的代码行上，直接分析出错时的运行时环境
• 分析 HTTP 请求
  Network 面板下列出了所有的 HTTP 请求，可以很方便的查看请求内容、HTTP 头、请求时间等信息

node-webkit和AppJS都是把浏览器核心和Node.js合并在一起的开源项目, 最终诞生的产品是桌面程序，有空的时候要研究下这两个东西。