在 Chrome 调试 Javascript

http://article.yeeyan.org/view/291524/259150

在 Chrome 调试 Javascript

译者： renova

发表时间：2012-03-22 浏览量：4469 评论数：0 挑错数：6

Chrome开发工具看起来有点儿奇怪，但做脚本调试的话，我认为选择Chrome的开发工具是最好的。一些重要区域还有快速转存（版本17.0.963.79中的所有区域）。

#1下面的工具栏

最左边的按钮可以在浏览器的新窗口或者新标签页中打开调试工具。

第二个按钮可以打开控制台，控制台是一个很有用的JavaScript的REPL（Read Execute Print Loop）工具。你可以在现有的调试环境下编译脚本代码，这意味着你可以操作DOM，使用jQuery尝试不同的CSS选择器，或者在页面加载库函数，弄明白一个API是怎样工作的。

TIP：需要空几行输入代码的时候，使用Shift+回车结束一行。控制台还能显示错误，警告，日志信息，还能够自动编译完成（编译的时候向右的箭头看起来更加安全，有些时候回车不一定好用（我说它很奇怪））。

第三个按钮是“选择页面的元素并插入”。

第四个按钮在异常发生时能够触发断点。调试器可以在所有的异常发生时中断编译，只在未处理的异常或忽略的异常时中断。未处理的异常时中断可以很快地找到中断的代码。

第五个按钮是很好的输出按钮。如果你想逐句阅读最小化的库函数源代码，这个按钮能在适合的位置设置断开可空白，方便阅读。不过，本地的变量仍然是最小化的，看起来像是Fortran程序的变量（I，j，k）。

第六个按钮是活动编辑按钮，点击源代码的时候，它可以在最前显示。就像控制台一样，如果你想弄清楚代码是如何编译通过的，这是个最好工具。更改的代码是活动的。

#2区域：断点

和其他编译器一样，你能在任何需要的代码行设置断点。你也能打断代码开始一段AJAX请求（只能在特定的URL打断）。此外还有事件侦听断点。当需要找出是哪个响应了点击时，就需要事件侦听断点，比如，事件包括定时器，像setTimer,clearTimer,以及Timer.tick事件句柄。

同时还有DOM断点，可以用来弄清楚哪个修改了DOM的内容。元素表里的元素发生改变，例如有人添加或删除了子元素，或者有人从DOM里删除了某元素，点击右键可以在此设置断点。

配置文件（#3）

点击“配置文件”按钮展开表单，上面有两个主要特性--配置CPU和快照（打开表单的时候，注意工具栏#1区域的按钮）。

CPU配置文件可以找出函数在页面的运算时间。

时间线工具能使界面更加有趣，尤其是页面载入慢的时候。

设置（#4）

#4区域右边的齿轮图标可以设置工具。这里并没有很多的设置内容，不过关闭缓存选项十分有用。