在 Chrome 调试 Javascript

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



chrome qi用 javascript chrome启用javascript_配置文件

#1下面的工具栏

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

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配置文件可以找出函数在页面的运算时间。


chrome qi用 javascript chrome启用javascript_配置文件_02

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

设置(#4)

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