javascript调试(二)-打断点调试js

ie7及以前的版本都不带调试工具,所以在遇到运行错误的时候,ie的左下角边框上会出现一个三角叹号 ,双击可以看到详情。但由于无法看到详细情况,实用意义不大。
ie7及老版本用户可安装IEDeveloperToolBar工具,再安装一个cachepal用于清缓存,十分方便。
ie8及新版本直接按F12,即可弹出自带工具。

chrome自带调试工具,跟firefox下的firebug工具类似,按F12键弹出,但是还是觉得firebug好用。
firefox,ff有着强大的插件库,安装firebug,在界面上按F12,会弹出调试窗口,基本上可以应付所有的javascript和css调试。

firefox在遇到js故障的时候没有ie中的叹号,但提供了一个更为强大的浏览器控制台,可以实时看到网络、css和js加载过程中的问题。
firebug调试


调试
以下面这段简单代码,我们跟踪一下其调用过程。
js调试

1.打开firefox的firebug工具,按窗口上的虫子图标或者F12都可以。
2.启用firebug的脚本调试功能
firebug调试js

3.刷新调试页面,脚本窗口捕获所有的脚本内容
javascript调试

为了能够看到第一步的过程和值,我们在前面行号上面点击,即可打断点,同时出现一个红点。

4.点击一下脚本所在的元素,此例是一个input button。
js调试

如上图,左边的窗口显示当前位置在第10行alert('doTest') ,说明程序已经从input中的onclick="doTest()"进到函数中来了。

此时如果alert中的内容是一个变量,比如this,鼠标悬停上来可以看到变量内容。
右边的窗口显示的时当前元素的属性。比如当前this位置、属性等。

5.步骤
在代码窗口的右上角,有几个或蓝或橙色的按钮,这是用于控制程序步骤的。多数情况下,使用步进一步步查看过程。

标签: javascript调试, javascript打断点, js打断点, firefox调试javascript, firebug调试js, chrome调试javascript

评论已关闭