常⽤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⽂件⽐较多的情况下，起来⽐较⿇烦，不过好在是按字母升序排列，见下图。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论