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控制frameSet示例
Sep 10 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JavaScript原型链详解
Nov 07 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
我的论坛源代码(五)
2006/10/09 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue插件实现v-model功能
2018/09/10 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JS实现瀑布流效果
2020/03/07 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
销售竞赛活动方案
2014/08/23 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
担保书范本
2015/01/20 职场文书
办公经费申请报告
2015/05/15 职场文书
七一表彰大会简报
2015/07/20 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python