JavaScript调试技巧之断点调试

首先,在各个浏览器中,断点调试支持的最好的当然是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);

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

b. 在适当的位置加入断点;

c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断。如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断;

用Firebug进行断点调试(点击放大)

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)。

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

我们找到让浏览器后退的代码,然后点击Firefox的后退按钮,这时Venkman就会停在BrowserBack方法上!让我们再一步一步地看一看,Firefox自己到底做了什么。btw,实现Firefox的js代码也不是很漂亮嘛~~~

用JavaScript Debugger断点调试Firefox(点击放大)

Venkman当然也带有一个console,利用这个console,我们可以看一看浏览器层次的window和document都是什么东西。类似于Firebug和其他浏览器的console,只要直接输入js代码片段即可!

使用Venkman自带的console(点击放大)

有兴趣的话,可以在这里发现更多有关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进行断点调试

使用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进行JavaScript调试:找到脚本

设置断点,重新加载页面(或者执行动作):

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

在右侧查看本地变量和函数调用栈:

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

Safari的调试工具一个亮点是,console和断点调试在同一个界面上,这样可以非常方便地在程序中断时,利用console来做一些验证操作。

3. IE8的断点调试功能

IE8自带的开发者工具,虽然极其难用,但也可以断点调试。断点调试的方法与上述雷同。

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

可以看到,IE8似乎莫名其妙地终止了js代码的识别。这样的话,从74行往后,都没办法加断点了,真不可思议。但我们有时为了兼容IE,不得不在IE下进行一些调试,怎么办呢?可以用上一篇文章的办法,在需要中断的位置加入debugger语句,这样程序运行时,IE8就会中断在debugger语句上了。

转载http://blog.csdn.net/teresa502/article/details/5087241

时间: 09-10

JavaScript调试技巧之断点调试的相关文章

转:iOS LLDB调试器和断点调试

本文转自:http://www.cnblogs.com/wfwenchao/p/3991060.html?utm_source=tuicool&utm_medium=referral 技巧一:运行时修改变量的值 你以前怎么验证是不是某个变量的值导致整段程序不能正常工作?修改代码中的变量的值,然后cmd+r重新启动app?现在你不需要这么做了,只需要设置一个断点,当程序在这进入调试模式后,使用expr命令即可在运行时修改变量的值. 假如有一个loginWithUsername:方法,需要两个参数:

iOS LLDB调试器和断点调试

技巧一:运行时修改变量的值 你以前怎么验证是不是某个变量的值导致整段程序不能正常工作?修改代码中的变量的值,然后cmd+r重新启动app?现在你不需要这么做了,只需要设置一个断点,当程序在这进入调试模式后,使用expr命令即可在运行时修改变量的值. 假如有一个loginWithUsername:方法,需要两个参数:username,password. 首先设置好断点,如下图所示: 运行app,进入断点模式后,在(lldb)后输入 ? 1 2 expr username = @"username&

手机调试 : 华为手机断点调试的问题

手头有一部华为P10, Android 9.0的手机,突然发现无法进行断点调试.具体现象就是调试器运行到断点处5s左右,就自动退出了. 解决方案:不要把断点打开主线程上,打在子线程上即可. 例: 原文地址:https://www.cnblogs.com/yongdaimi/p/11819053.html

你可能不知道的14个JavaScript调试技巧

以更快的速度和更高的效率调试你的 JavaScript 了解你的工具可以在完成任务的过程中发挥重大作用.尽管传言 JavaScript 难以调试,但是如果你掌握了一些调试技巧,那么你将会花费更少的时间来解决这些错误. 我们已经列出了14个您可能不知道的调试技巧,但可能要记住,这样下次你需要调试 JavaScript 代码时就可以马上使用了! 现在就马上开始. 1. 'debugger;' 除了 console.log , debugger; 是我们最喜欢.快速且肮脏的调试工具.一旦执行到这行代码

不依赖浏览器控制台的JavaScript断点调试方法

随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具).非正常浏览器web.移动场景下 的内嵌等场景. 随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已

JavaScript调试技巧

1. 'debugger;' 除了 console.log , debugger; 是我们最喜欢.快速且肮脏的调试工具.一旦执行到这行代码,Chrome 会在执行时自动停止. 你甚至可以使用条件语句加上判断,这样可以只在你需要的时候运行.愚人码头注:本人实在觉得这种调试方面很不好,因为后续的调试步骤和断点调试没什么区别.而且调试完成后,还要记住删掉这行代码.确实有点肮脏. 2. 将 objects 显示为表格 3. 尝试所有的屏幕尺寸 虽然在桌面设备上安装不同移动设备模拟器非常棒,但在现实世界中

参考博客:Java断点调试技巧

Java断点调试技巧: 如何调试Java程序? 大家最开始学习Java,都会觉得IDE调试好高端有木有,其实很简单了. 下文会尽量简单直观的教会你在Eclipse中调试,其他的IDE调试步骤也是类似的. 1.在你觉得有错的地方设置断点. 在代码行数前,点击右键,注意是右键,然后选择Toggle Breakpoint. 你可能会问,我如何知道在哪儿放置断点? 如果对这个问题完全没有感觉,你完全可以多打几个断点,单步调试直到找到异常,只是多花一点时间而已,而且这样可以更深入了解程序的执行过程! 当然

java 断点调试

最基本的操作是:  1, 首先在一个java文件中设断点,然后运行,当程序走到断点处就会转到debug视图下, 2, F5键与F6键均为单步调试,F5是step into,也就是进入本行代码中执行,F6是step over, 也就是执行本行代码,跳到下一行, 3,F7是跳出函数 step return 4,F8是执行到最后. =========================== F8 resume 跳到下一个断点 F7 step return 返回到调用的地方(好比你按F5进入了调用函数的内部

vs调试技巧(二)

VS2010断点调试技巧 设置断点:在如下图中的红色圆点处设置断点,红色圆点表示已经在这行设置 断点.快捷键F9. 启动调试:按F5或者点击左边红框中的按钮.右边框是开 始执行(不调试)Ctrl+F5. 调试工具栏:下面是工具栏中对应的名称和快捷键.         在调试过程中F5是执行到下一个断点.F11是逐语句,在执行到下图中的断点 时,按F11会执行到Fibonacci方法里面逐步记录执行过程.F10是逐过程,与逐语 句不同的是,在执行到下图中断点时,再执行会执行断点下面的语句,而不是去