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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
canvas实现钟表效果
Feb 13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
详解Vue3中对VDOM的改进
Apr 23 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
可输入的下拉框
2006/06/19 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python处理csv中的空值方法
2018/06/22 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
大学生村官承诺书
2014/03/28 职场文书
社区活动总结报告
2014/05/05 职场文书
学校清明节活动总结
2014/07/04 职场文书
测量员岗位职责
2015/02/14 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android