宝哥软件园

JavaScrip的断点调试调试技巧

编辑:宝哥软件园 来源:互联网 时间:2021-09-29

首先,在所有浏览器中,火狐是对断点调试的最好支持。Firefox不仅可以使用Firebug调试页面上的js脚本,还可以使用JavaScript Debugger (Venkman)等高级调试工具调试Firefox扩展中的js。此外,Firefox还支持一些更高级的断点调试和变量监控功能。

在其他浏览器中,Opera、Chrome、Safari的调试功能也很好用。Opera的DragonFly速度相对较快,界面清爽,功能强大,但不如Safari友好。相比较而言,IE8的程序员工具根本没用。这次时间有限,总结一下火狐下的调试技巧。

1.使用Firebug调试断点。

用Firebug调试JavaScript非常方便。具体步骤:

A.打开Firebug后,启用“脚本”调试,找到引用的脚本文件(或内联js);

用Firebug找到要调试的脚本(点击放大)

使用Firebug查找要调试的脚本(点击放大)。

B.在适当的位置添加断点;

C.如果断点已经执行,刷新页面,脚本将在断点处中断。如果断点还没有执行,可以直接执行页面上的动作(如点击按钮等)。),然后代码会在断点处中断;

用Firebug进行断点调试

用Firebug调试断点(点击放大)。

观察函数调用栈,观察局部变量,或者执行单步调试。

真的很简单!使用Firebug断点进行调试的优势总结如下:

可以添加断点的行使用绿色行号,非常直观;

调用栈有两种显示方式,非常方便。

局部变量的显示非常清晰。

2.使用JavaScript调试器调试断点。

这是一个旧的调试工具,以前叫做Venkman,可以以扩展的形式安装在Firefox上。我们在这里称之为文克曼。它不仅可以调试页面脚本,还可以调试Firefox扩展中的js。我们在做Firefox扩展开发的时候,Venkman是不可或缺的工具,田老师强烈推荐!当然,Firefox本身的逻辑也是通过JavaScript实现的。现在我们可以使用Venkman来调试火狐本身了。Firefox的核心js是browser.js在这个路径下:

chrome ://browser/content/browser . js

我们打开Venkman后,在Loaded Scripts中填写browser.js,这个js文件会被过滤掉(如果没有看到browser.js,可能需要检查是否选择了Debug-Exclude浏览器文件)。

Venkman:选择要调试的js文件

文克曼:选择要调试的js文件(点击放大)。

我们找到让BrowserBack的代码,然后点击火狐的后退按钮,那么Venkman就会在BrowserBack方法上停下来!让我们看看火狐做了什么。顺便说一下,火狐的js代码也不是很漂亮~ ~ ~

用JavaScript  Debugger调试Firefox

用JavaScript调试器断点调试火狐(点击放大)。

文克曼当然配有控制台。有了这个控制台,我们可以了解浏览器级别的窗口和文档。类似于Firebug和其他浏览器的控制台,只需要直接输入js代码片段!

使用Venkman自带的console

使用文克曼自己的控制台(点击放大)。

如果你感兴趣,可以在这里找到更多关于火狐开发(以及扩展开发)的有趣的东西!

3.使用调试器在程序中添加断点。

还有一种鲜为人知的添加断点的方法。我们可以在程序中添加调试器语句,这样Firefox调试工具就会停留在这个语句上,代码就会被挂起,这和添加断点的效果一样。例如:

var my func={ get _ field _ value _ callback : function(){ debugger;var ed=this,target=ed.currSpan/*多做一些事情*/}}当页面重新加载时,断点将停留在调试器语句上。这样,我们可以在编写代码时随意添加断点。此外,其他浏览器(包括IE8!惊喜!)还支持调试器语句!

上次总结了在Firefox下调试JavaScript断点的技巧。这次,我将看看在其他浏览器下的调试。有一点是,这里的调试技巧都不依赖浏览器以外的工具,比如Aptana、VS2008等等。如果你想找到一些关于这个的信息,我这里没有。

其他浏览器,主要是Opera、Safari、Chrome和IE8。除了IE8,它们的调试功能都挺不错的。基本上,他们可以搜索脚本、添加断点、查看调用堆栈、本地变量和强大的控制台。

1.使用Opera的蜻蜓进行断点调试。

使用Opera进行断点调试

用蜻蜓歌剧院调试断点。

开放工具——高级——开发者工具,你可以看到一个类似Firebug的开发工具,叫做蜻蜓,或者蜻蜓。这里可以查看页面结构、网络交互、断点调试,调试时可以使用命令行(控制台)。

WindowsXP上的Opera也属于YUI支持的A级(详见此表),所以开发的时候要尽量支持。此外,蜻蜓的DOM查看工具还有一个亮点,导出当前的DOM视图。我们可以在线做一些DOM的修改,然后导出得到修改后的HTML代码,非常方便。

2.使用Chrome和Safari调试断点。

如果觉得Opera太小,可以在Safari或者Chrome上调试。两种浏览器的调试方法和界面非常相似,这里以Safari 4.0为例。打开菜单-开发-开始调试JavaScript,会弹出一个调试工具。值得一提的是,Safari和Chrome的调试工具不应该在浏览器下Dock,因为如果弹出来,调试界面刚刚好。首先找到要调试的脚本:

使用Safari进行JavaScript调试:找到脚本

使用Safari进行JavaScript调试:找到脚本。

设置断点并重新加载页面(或执行操作):

使用Safari进行JavaScript调试:设置断点

使用Safari进行JavaScript调试:设置断点。

查看右侧的局部变量和函数调用堆栈:

使用Safari进行JavaScript调试:变量查看

使用Safari进行JavaScript调试:变量查看。

Safari调试工具的一大亮点就是控制台和断点调试在同一个界面上,这使得程序中断时使用控制台做一些验证操作非常方便。

3.IE8的断点调试功能。

E8自带的开发工具极难使用,但也可以在断点处调试。断点的调试方法同上。

使用IE8开发者工具进行断点调试

使用IE8开发人员工具调试断点。

可以看出,IE8似乎莫名其妙地终止了对js代码的识别。在这种情况下,从第74行开始,没有办法添加断点,这是不可思议的。但是有时候为了兼容IE,我们不得不在IE下调试。我们做什么呢您可以使用上一篇文章中的方法在需要中断的地方添加调试器语句,这样当程序运行时,IE8将在调试器语句上被中断。

以上内容是火狐关机调试,这是边肖分享的一个JavaScrip调试技巧。希望你喜欢。

更多资讯
游戏推荐
更多+