JavaScrip调试技巧之断点调试


Posted in Javascript onOctober 22, 2015

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

JavaScrip调试技巧之断点调试

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

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

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

JavaScrip调试技巧之断点调试

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

JavaScrip调试技巧之断点调试

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

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

JavaScrip调试技巧之断点调试

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

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

JavaScrip调试技巧之断点调试

使用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进行断点调试

JavaScrip调试技巧之断点调试

使用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到浏览器下面,因为弹出来的话,调试界面是刚刚好的。
首先找到要调试的脚本:

JavaScrip调试技巧之断点调试

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

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

JavaScrip调试技巧之断点调试

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

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

JavaScrip调试技巧之断点调试

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

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

3. IE8的断点调试功能

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

JavaScrip调试技巧之断点调试

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

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

以上内容是小编给大家分享的JavaScrip调试技巧之Firefox断电调试,希望大家喜欢。

Javascript 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 #Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 #Javascript
浅谈node.js中async异步编程
Oct 22 #Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 #Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 #Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
You might like
组合算法的PHP解答方法
2012/02/04 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
js不是基础的基础
2006/12/24 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python里隐藏的“禅”
2014/06/16 Python
Python中bisect的用法
2014/09/23 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python datetime包函数简单介绍
2019/08/28 Python
如何在python中写hive脚本
2019/11/08 Python
pyqt5中动画的使用详解
2020/04/01 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
公休请假条
2014/04/11 职场文书
音乐教师个人总结
2015/02/06 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python