2014第6周五JS调试
浏览数：27 /
时间：2015年06月09日
今天才发现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合并在一起的开源项目,
最终诞生的产品是桌面程序，有空的时候要研究下这两个东西。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
