首先,在各个 浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如 JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还支持一些更为高级的断点调试、变量监视功能。
其他浏览器里,Opera、Chrome和Safari的调试功能也比较好用。Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好。相比来说,IE8的程序员工具简直没法用。
这次时间有限,先来总结一下Firefox下的调试技巧。
1. 使用Firebug进行断点调试
使用Firebug调试JavaScript非常方便。具体步骤:
a. 打开Firebug后,启用“脚本”调试,找到引用的脚本文件(或者行内js);
b. 在适当的位置加入断点;
c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断。如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断;
d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试。
确实非常简单!用Firebug断点调试的优点总结如下:
- 能加断点的行用绿色行号,非常直观;
- call stack用两种方式显示出来,很方便;
- 本地变量的显示非常清晰明了。
2. 使用JavaScript Debugger进行断点调试
这是老牌的调试工具,之前叫做Venkman, 可以以扩展形式安装在Firefox上,我们在这里就称他为Venkman吧。它不仅能够调试页面脚本,还能调试Firefox扩展 (extension)里的js。我们在做Firefox扩展开发时,Venkman是必不可少的工具,老田强力推荐!当然,Firefox本身的逻辑实 现,也是用JavaScript来做到的。我们现在可以用Venkman来调试一下Firefox本身。Firefox的核心js是 browser.js,在这个路径下:
chrome://browser/content/browser.js我们打开Venkman之后,在Loaded Scripts里填入browser.js,这个js文件就会被过滤出来(如果没有看到browser.js,那么你可能需要查一下是否选上了Debug->Exclude browser files)。
我们找到让浏览器后退的代码,然后点击Firefox的后退按钮,这时Venkman就会停在BrowserBack方法上!让我们再一步一步地看一看,Firefox自己到底做了什么。btw,实现Firefox的js代码也不是很漂亮嘛~~~
Venkman当然也带有一个console,利用这个console,我们可以看一看浏览器层次的window和document都是什么东西。类似于Firebug和其他浏览器的console,只要直接输入js代码片段即可!
有兴趣的话,可以在这里发现更多有关Firefox开发(以及扩展开发)的好玩的东西!
3. 使用debugger在程序中加入断点
另外还有一个少为人知的断点加入方法。我们可以在程序中加入debugger语句,这样Firefox的调试工具会停留在这条语句上,代码也暂停执行,和加入断点的效果一样。例如:
var myfunc = {
get_field_value_callback : function() {
debugger;
var ed = this, target = ed.currSpan;
/* do something more */
}
}
这时重新加载页面,断点就会停留在debugger语句上。这样,我们就可以在写代码时随心所欲地加入断点了。另外,其他浏览器(包括IE8!Surprise!)同样支持debugger语句!
上次总结了Firefox下进行JavaScript断点调试的技巧,这次来看一下其他浏览器下的调试。一点说明,这里的调试技巧都不借助于浏览器之外的工具,例如Aptana,VS2008等。如果要找这方面的一些资料,我这里没有哈。
其他浏览器,主要是Opera, Safari, Chrome和IE8。这之中除了IE8,它们的调试功能都挺不错的,基本都可以搜索脚本,加入断点,查看调用栈、本地变量,以及强大的console。
1. 使用Opera的Dragonfly进行断点调试
打开Tools – Advanced – Developer Tools,即可看到类似于Firebug的开发工具,名字叫做Dragonfly,也就是蜻蜓。在这里可以查看页面结构,查看网络交互,以及断点调试,并且可以在调试过程中使用Command Line (console)。
Opera on WindowsXP也属于YUI要支持的A-grade(详见此表格),所以我们在开发的时候,也要尽量去支持。此外Dragonfly的DOM查看工具有一个亮点,Export current DOM view。我们可以在线做一些DOM改动,然后Export一下,即可得到改动后的HTML代码,非常方便。
2. 使用Chrome和Safari进行断点调试
如果你觉得 Opera太小众,那么你可以在Safari或者Chrome上进行调试。两个浏览器的调试方式、界面极其相似,所以这里以Safari 4.0为例。打开Menu – Develop – Start Debugging JavaScript,即可弹出一个调试工具。值得一提的是,Safari和Chrome的调试工具最好不要Dock到浏览器下面,因为弹出来的话,调试 界面是刚刚好的。
首先找到要调试的脚本:
设置断点,重新加载页面(或者执行动作):
在右侧查看本地变量和函数调用栈:
Safari的调试工具一个亮点是,console和断点调试在同一个界面上,这样可以非常方便地在程序中断时,利用console来做一些验证操作。
3. IE8的断点调试功能
IE8自带的开发者工具,虽然极其难用,但也可以断点调试。断点调试的方法与上述雷同。
可以看 到,IE8似乎莫名其妙地终止了js代码的识别。这样的话,从74行往后,都没办法加断点了,真不可思议。但我们有时为了兼容IE,不得不在IE下进行一 些调试,怎么办呢?可以用上一篇文章的办法,在需要中断的位置加入debugger语句,这样程序运行时,IE8就会中断在debugger语句上了。
相关推荐
本篇文章给大家介绍javascript调试技巧之断点调试,主要介绍使用Firebug、debugger、debugger在程序中加入断点调试等,但是这些调试技巧都不借助于浏览器之外的工具,其他浏览器主要是opera、safari、chrome和ie8,...
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点...如果你精通 Eclipse 中的各种 Java 调试技巧,那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1
在Javascript调试中,我们经常会使用到断点调试。其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点)。 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面...
在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 你可以使用“debugger;”语句在代码中加入强制断点。 需要断点条件吗?只需将它包装它在IF子句中: 代码如下...
给大家介绍javascript如何调试有哪些建议和技巧,涉及到javascript调试方法相关知识,对javascript调试方法感兴趣的朋友可以参考下本
javascript简称JS,是网页的前端开发语言,直接运行在浏览器上,以前我刚开始学的时候,并不懂这个,所以我每次开发或调试它,都是在vs.net里面,现在想想,实在是太痛苦了,其实JS是执行在浏览器的,而不是执行在服务器的,...
假如读者了解如何在Chrome中添加JavaScript断点,那请继续阅读;否则,自行脑补。 假如有这样一段代码: 代码如下: var a = 1; function test(){ var a, b, c, d, e; a = 2; b = a – 1; b = 9; c = 3; ...
主要介绍了JS错误处理与调试操作,结合实例形式分析了JavaScript错误捕获、处理、调试工具、断点调试等相关操作技巧,需要的朋友可以参考下
我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。需要带有条件的断点吗?你只需要用if语句包围它: 代码如下:if (somethingHappens) { debugger; } 但要记住在程序发布前删掉...
下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访问作用域 通过一行简单的JS程序访问...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...
1.6.4 常见开发调试技巧 66 1.6.5 错误异常处理方法 70 本章常见技术面试题 76 常见面试技巧之面试前的准备 76 本章小结 77 第2章 细节决定成败 79 2.1 Equals()和运算符==的区别 80 2.2 const和readonly的区别 82 ...
1.6.4 常见开发调试技巧 66 1.6.5 错误异常处理方法 70 本章常见技术面试题 76 常见面试技巧之面试前的准备 76 本章小结 77 第2章 细节决定成败 79 2.1 Equals()和运算符==的区别 80 2.2 const和readonly的区别 82 ...
设置断点是页面调试过程中的常用手段,除此之外,还可以通过查看页面的跟踪信息进行错误排查以及性能优化。ASP.NET中启用页面跟踪非常方便,只需在Page指令中加入Trace=”True”属性即可: <%@ Page ...