用Chrome的Developer Tools，调试JavaScript

Chrome浏览器得益于其优秀的V8解释器，JavaScript执行速度和内存占有率表现非常优秀。对于HTML+CSS+JavaScript前台技术的学习或者开发，浏览器Developer Tools的使用是必不可少的，也能极大的提高学习或者开发效率。 在Windows下，Developer Tools的快捷键为F12。本文版使用的Chrome浏览器版本为：33.0.1750.154。

1 Developer Tools功能结构

 

　　Developer Tools的功能栏有8个，分别是Elements元素，Network网络，Sources源码，Timeline时间线、Profiles性能、Audits监察，Console控制台。

2 Elements元素 

2.1 Elements控制面板基本功能

　　Elements控制面板能够让你查看所有的DOM Tree中的内容，可以根据HTML内容找到页面中的元素或者根据页面中的定位标签，同时可以改变DOM的内容。由Javascript代码产生的标签，也只能通过这种方式查看了（在你的IDE中无法看到）。

Elements控制面板

      如上图所示，我选中某个标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，DOM中也会把对应的标签给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的层次关系。 

　　我们也可以对里面的内容进行临时性修改，比如将找到的“百度一下”，改成“调试一下”后，马上在页面中相应显示。

 

临时修改内容

2.2 右侧功能栏 

2.2.1 Style查看

　　使用CSS时，存在着样式覆盖等问题，有的时候显示的样式可能出乎你的意料，或者对元素的大小位置（特别是窗口）的查看。同时，我们也可以在这里进行临时修改，在页面中反应（真正的所见即所得，不是别的IDE所能替代的）。

 

修改样式或大小

2.2.2 标签注册事件查看

　　如果你想知道“百度一下”这个按钮注册了哪些功能，或者鼠标点击时执行了哪个JavaScript函数，就可以通过这个功能实现了。

 

选中百度一下标签，定位mousedown事件，找到对应的执行函数

2.2.3 查找功能

　　Ctrl+F可以调出查找，查找你想要的内容，非常实用。

3 资源控制面板

　　资源控制面板包括了这个页面中下载下来的所有的资源，同时也包括本地的Cookie，还有HTML5中Local Storage等高级功能。

 

资源查看面板

4 网络控制面板

　　网络控制面板在两个方面还是非常有用的，一个是发现图片（CSS、JS等）加载不了，可以通过Network查看它请求的位置。第二个，是调试AJAX时，可以查看它的请求和获取。如百度输入框中，输入关键字后会自动显示热门内容，这显然是一个AJAX的使用。 

网络加载显示

查看HTTP请求和获得的内容

5 源码控制面板（js调试）

　　JavaScript的调试，基本上是通过源码控制面板和命令行配合进行的。

5.1 Pretty print

　　网上的JavaScript文件一般是压缩过的，阅读压缩过的JavaScript肯定不是人能进行的，更别说添加断点了。在 Scripts 面板下面有个Pretty print 按钮（这种符号{}），点击它会将压缩的JavaScript格式化成规整的格式，这时候可读性就大大提高了。 

调整前

 

调整后

5.2 代码出错定位

　　在IDE中有些错误是检查不出来的（特别是跟浏览器有关的部分）。加载该页面后，可以在显示栏看到报错信息，然后直接定位至出错点。

 

JavaScript错误位置定位

5.3 添加断点及单步

5.3.1 断点中断

　　可以通过单击左侧，添加断点，并在右侧显示。也可以通过Watch Expression添加查看的变量。 

　　我们添加了一个断点，如果在页面上的操作执行到断点处，就会在断点处终止。然后，我们可以通过右侧最上面的按钮调试，与VS等IDE的调试非常相近。Call Stack是显示函数的调用栈，在调试大规模的JavaScript程序是非常有用。

 

5.3.2 页面中断调试

　　除了给设定常规断点外, 还可以在某一特定事件发生时中断（不针对元素），在 Scripts 面板右侧，有个Event Listener Breakpoints，这里列出了支持的所有事件, 不仅Click，Keyup等事件, 还支持Timer，Load等事件。

 

6 控制台（命令行）

　　命令行对于我们这种菜鸟有一个非常有用的地方，对于JavaScript提供的API或者API的功能不是非常熟悉。这个时候命令行就成为我们试验最好的地方。比如，我们想查看document下面有哪些函数，我们就可以在命令行中输入，然后选中并尝试。对于JQuery等开源框架的学习，这种方式也非常高效，学代码还是得跑起来才行。

  

　　我们可以在命令行里面，直接改变内存中的内容；对于小函数，我就可以用这样的方式直接替换。

　　我们按Enter是对输入的内容运行，如果要换行需要按Shift+Enter。

7 性能查看控制面板（profiles）

　　这个控制面板允许我们查看函数运行时CPU占有率，还有内存占有率。这能够帮助我们优化代码，查看代码性能（内存还能查看闭包泄露等）。 

　　按Start可以分析，现在的内存占有率。进行操作后，再得到第二份内存分析报告，这样我们就能通过内存变化来进行分析了。在底栏，还有对比、总结等选项。

 

8 其他

　　在调试过程中，可能还会受别的因数影响，如迅雷下载插件xl.js等，在开发时把这些东西禁用掉。Firefox浏览器的调试也非常强大，在以前开发工程中通常通过两个浏览器调试器的配合使用进行。当然，如果工程要求比较高，肯定要在不同浏览器下分别调试。

参考：http://www.cnblogs.com/wukenaihe/archive/2013/01/27/javascript%E8%B0%83%E8%AF%95.html