常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

来源:

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

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

A、 功能讲解

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

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

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

最常用的断点基本有两种:行断点及条件断点。行断点模式最为常用,即在需要调试的行前点击加上断点即可,如下:

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

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

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

二、IE“开发人员工具”

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

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

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

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

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

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

时间: 2024-08-11 16:44:18

常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)的相关文章

Web开发标配--开发人员工具-JS调试

喜欢从业的专注,七分学习的态度. JS:全称JavaScript,Web中,js主要在两个地方: html的<script type="text/javascript"></script> 中. js脚本文件中,页面引用js:<script src="js/***.js"></script>JS调试一般在浏览器开发人员工具"调试程序"Tab页. F12打开浏览器 开发人员工具. 开发人员工具 主要关

30K iOS程序员的简述:如何快速进阶成为高级开发人员

前言: 本篇文章适用于所有在这个行业已经有了几年时间后想要在职业生涯中取得突破的开发人员,编程人员和程序员(或者你可能刚刚开始,但希望你能看到你的路径) 本文适合那些有着简单愿望的人:你想成为一名高级开发人员,并希望在你的领域中脱颖而出.在阅读完这篇文章后,您将获得一组具有最佳资源列表的路径,供您升级并成为高级开发人员. 作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS交流群:638302184,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题.面试经验,讨论技术

常用JS对象的方法总结

http://www.cnblogs.com/Yfling/p/6681207.html String 方法 描述 charAt() 返回在指定位置的字符. charCodeAt() 返回在指定的位置的字符的 Unicode 编码. concat() 连接字符串. indexOf() 检索字符串. match() 找到一个或多个正则表达式的匹配. replace() 替换与正则表达式匹配的子串. search() 检索与正则表达式相匹配的值. slice() 提取字符串的片断,并在新的字符串中返

iOS开发之工具篇-20个可以帮你简化移动app开发流程的工具

本文转载至 http://www.cocoachina.com/ios/20130402/5926.html 如果想进入移动app开发这个领域,你总能从别的开发者或者网上或者书上找到各种各样的方法和工具,对于新手来说,还没有摸清门路就已经陷入迷茫了.这里推荐20个可以帮你简化app开发流程的工具.很多开发者都使用过这些工具,涉及原型和设计.编程.测试以及最后的营销,基本上涵盖了整个开发过程. 原型和设计 有了一个很好的创意后,你要做的不是立刻编程,而是设计UI和创建原型,这样你才能知道app如何

开发人员调试工具Chrome Workspace

Workspace是个什么样的东西呢?他可以在开发人员工具中调试改动js或者css同一时候自己主动保存文件.可以避免开发人员在工具中调试好,再到编辑器中改动一次代码的反复操作,可以提高一定的效率 配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发人员工具(F12)中对文档的改动直接应用于相应文件里. 因为Chrome并不知道当然文档相应用的文件为哪个,所以须要配置Workspace的映射关系来告诉Chrome对哪个文件做改动 使用Workspac

常用js方法整理common.js

项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data: data, dataType: 'json', success: ok, error: error }); } h.post = function (url, data, ok, error) { $.ajax({ url: url, data: data, type: 'post', data

常用JS方法

// 悬浮置顶 ; (function ($) { $.fn.crumbsFixedPosition = function (options) { var defaults = { cName: 'fixed_pos' } var options = $.extend(defaults, options); return this.each(function () { var $this = $(this); var t = $(this).offset().top; $(window).on(

常用js方法封装

常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: function(dt) { var str = ""; //存储时间的字符串 //获取年 var year = dt.getFullYear(); //获取月 var month = dt.getMonth() + 1; //获取日 var day = dt.getDate(); //获取小时

step by step教你常用JS方法封装(一) [ 大杂烩 ]

本文参考原文-http://bjbsair.com/2020-03-25/tech-info/6338/ 持续更新中... 常用JS方法封装方法预告: 项目常用JS方法封装(二) [ 时间处理 ] 项目常用JS方法封装(三) [ 字符串相关处理 ] 项目常用JS方法封装(四) [ 数组相关处理 ] 使用方法非常简单,只需放到你的 utils.js 工具文件中,直接 export const 加上我的封装方法,在别的文件中使用{方法1,方法2,方法3...}引用后就可以直接使用了! 001.输入一