文档章节

调试JS的工具和一些方法

sheilacat
 sheilacat
发布于 2015/03/19 16:36
字数 1650
阅读 23
收藏 0

这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具、方法、优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充。  

         一、Firebug:如果项目可以支持Firefox,我依然首推Firebug作为JS调试首选,虽然有些不足之处,但基本可以满足大家90%调试场景需求。

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team 

A、 功能讲解

见上图,图中已标注出功能的五个关键点,下面顺序说明,先将Firebug切换到标注1中的JS调试功能Tab“脚本”上;打开标注2中的当前页面加载的所有静态JS链接资源,直接输入鼠标键入关键词就可以出现标注2下方文本框快速搜索打开需要的指定JS文件;
常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team


eq-commom.js为例,细心的同学应该已经发现页面加载的是压缩格式的JS文件,其实Firebug不仅提供了对行设置调试断点,也支持语句级的断点调试,所以压缩文件调试也无妨,只要选中相应语句右键即可,如下:  


 常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team    


         但是大家一定同意这样调试是多么痛苦的一件事,当然特殊情况无可奈何时除外。解决这个问题首先得区分一下运行环境,如果是开发环境,可以改下环境配置从而让页面由加载eq-common.js的压缩文件改为加载eq-common-src.js的源格式文件。如果是线上环境查线上问题或是开发环境改配置比较麻烦,教大家一个懒而实用的方法,就是将eq-common-src.js的源格式文件内容贴到eq-common.js的压缩文件之中(当然线上环境需要要将线上静态加载资源绑定到本地)。当然这都是假定有源代码运行环境的前题之下的,如果没有Firebug就没有办法了,这也算是Firebug的一个不足之处(下面在IE的“开发人员工具”中会讲到对此的解决方案)。

         最常用的断点基本有两种:行断点及条件断点。行断点模式最为常用,即在需要调试的行前点击加上断点即可,如下:常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team

这 样程序运行到此处便会中断,在中断状态下可以如图进行多种操作和观察,包括:单步、逐过程、跳出(即跳到下一个断点)调试;对当前变量查看或进行监控,查 看当前堆栈信息(这个在当前断点处存在问题时可以快速追溯来源),查看或重新设置管理断点(在这里也方便定位断点位置);打个命令行功能,可以边调试边在 当前状态下写脚本执行一些简单或更复杂的操作。

         条件断点虽然没有行断点使用得那么多,但在一些情况下是非常有用的,顾名思义就是在程序的某个过程或语句在程序运行时满足一个特定条件下暂停。比如,在一个很大的for循 环中有问题,但很多情况下是某些数据产生时有问题,如果在循环中采用行中断那就痛苦了,得一次循环一次循环地调试观察变量值定位问题。而条件断点则只需要 在一个过程或语句上设置一个条件断点,当程序运行到此过程或语句且满足给定条件时程序就会中断暂停下来,省时省力,定位快速。如下图:

         常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team

 

所以根据场景不同,选择合适的调试模式。

         二、IE“开发人员工具”

         IE8开始,在浏览器里就已经集成了“开发人员工具”(之前是IE7中需要单独安装,功能也没有现在这么强大),基本功能与Firebug类似,这里主要针对其调试功能说明一下。


 

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team 

         将上图与本文第一幅Firebug的基本操作界面图进行大致比较,很容易看出相互的调试功能基本相同,所以在此不再撰述。只是右侧多了一个显示当前断点局部变量当前情况的功能点,相比Firebug,随时可以观察或跟踪当前局部变量包括对象的数据信息,双击相应“值”列或点击右键都可以很方便地更改当前局部变量的值包括对象的属性值,同时也可以打开控制台来在当前局部环境中写入JS脚本来执行以实现更复杂的逻辑操作。

         另外,其还支持模拟多个IE版本浏览器,极大方便了多IE浏览器的测试。可以指定当前IE浏览器以特定版本运行,又或是仅仅当前切换的页面以指定版本的IE浏览器运行。即“浏览器模式”或“文档模式”运行

        常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team

         开启IE浏览器高度模式后,可以随时探测及定位当前浏览页面的脚本错误并在控制台中提示错误原因信息,如果问题还不明确,往往可以打开“调用堆栈”来查看出现错误的根源。


 

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team 

         此工具还有Firebug没有的一个非常好的功能,就是在调试之前对压缩或非压缩的当前页面JS格式化,并对格式化后的JS进行调试,这对于分析线上问题时是非常有用的,毕竟压缩后的JS文件调试起来让人感觉痛苦。


 

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team 


 

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team 

         相比调试,以上似乎都是IE的“开发人员工具”比Firebug要使的几个点,但此工具也有其不足的地方,就是其DOM定位及样式处理方面不足,还需要辅助其它如IE Deweloper等软件,不如Firebug集成在一起来得方便;另外此工具不能象其它插件一样嵌入到浏览器窗口,总要来回切换窗口甚是麻烦,还有一个就是不能象Firebug那样多字母单词模糊搜索需要调试的JS文件,特别是在当前页面加载JS文件比较多的情况下,找起来比较麻烦,不过好在是按字母升序排列,见下图。

常用JS调试工具使用方法,帮你快速定位问题 - 网易杭州QA - 网易杭州 QA Team


本文转载自:http://ggmmy.blog.163.com/blog/static/2062262882012111610454738/

sheilacat
粉丝 35
博文 75
码字总数 35249
作品 0
长沙
程序员
私信 提问
分享10个 javascript 在线 debugging 工具

日期:2012/01/18 来源:GBin1.com 调试Javascript可能是web开发中最让人郁闷的事情。所以这里我们绝定来寻找一些好的工具来帮助大家调试。这里是10款我们精选的基于浏览器的JS在线调试工具,...

gbin1
2012/01/19
1K
2
IE开发者工具 - 轻松调试javascript.

javascript 语言非常强大, 在web领域应用非常多, 可对于许多新手, 甚至组长级人物来说, 也未能说完全掌握javascript的全面, 本人平时使用jquery的时间很多, 所以对js方面有所了解, 同时, 我也...

Tuesday
2013/07/26
0
15
如何有效避免JS冲突

如何有效避免JS冲突,当你使用js写很多特效,或者使用网上流传的js插件时,都会引起或这或哪的页面不兼容的问题,当然也包括一些js冲突,很多人会做js调试用谷歌浏览器自带的开发者工具。但现...

恶魔岛
2015/10/16
153
2
【Chorme】前端调试工具之Chorme专篇

【相关来源】 Browser-Sync:响应式Web开发调试利器 开发者调试工具Chrome Workspace Chrome中的 workspace 工具(官方) Chrome调试工具developer tool技巧 【Chrome开发,debug的使用方法。...

呢喃的猫咪
2013/02/27
473
1
实用Javascript调试技巧

摘要: 高效调试JS代码。 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug经授权转载,版权归原作者所有。 见过太多同学调试Javascript只会用简单的甚至,看着真为他们捉鸡。。因...

Fundebug
07/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部