使用Chrome开发者工具进行JavaScript问题定位与调试

使⽤Chrome开发者⼯具进⾏JavaScript问题定位与调试ChromeV35版本中的开发者⼯具分为8个⼤模块，每个模块及其主要功能为：Element标签页：⽤于查看和编辑当前页⾯中的HTML和CSS元素。Network标签页：⽤于查看HTTP请求的详细信息，如请求头、响应头及返回内容等。Source标签页：⽤于查看和调试当前页⾯所加载的脚本的源⽂件。TimeLine标签页：⽤于查看脚本的执⾏时间、页⾯元素渲染时间等信息。Profiles标签页：⽤于查看CPU执⾏时间与内存占⽤等信息。Resource标签页：⽤于查看当前页⾯所请求的资源⽂件，如HTML，CSS样式⽂件等。Audits标签页：⽤于优化前端页⾯，加速⽹页加载速度等。Console标签页：⽤于显⽰脚本中所输出的调试信息，或运⾏测试脚本等。后⽂会在阐述过程中，会提及使⽤Element标签页探测页⾯元素并查看该元素的HTML内容，也会使⽤Source标签页与Console标签页调试脚本及查看调试信息，并不会详细介绍他们的基本功能，请在阅读时提前了解以上相关标签页的基本功能。使⽤Chrome开发者⼯具巧妙定位脚本代码⽬前很多的⽹页应⽤程序都会使⽤各种诸如JavaScript之类的脚本语⾔，来增强事件处理、页⾯展现或是样式控制等⽅⾯的功能。很多⽹站或⽹络应⽤系统都已做成单页⾯模式，该页⾯只负责加载相关的脚本与样式，这些脚本与样式来负责动态⽣成更多的⼦页⾯或对话框。因此，该类⽹页应⽤程序的脚本数量会⾮常⼤，从⽽使开发⼈员在如此之多的脚本中定位某个问题变得困难起来，但也并⾮毫⽆技巧。合理命名模块ID，根据ID找到相关脚本⽂件。单页⾯的⽹络应⽤程序⼀般会引⼊复杂的JavaScript框架，如JQuery,Dojo或ExtJS等。这些框架都⽀持声明⾃定义的⽹页⼩组件，如Dojo中的widget。⼀般⽽⾔，每⼀个widget会被单独写在⼀个JS⽂件中。因此，在定义该组件时，可以将储存它的JS⽂件名做为其id成员属性的⼀部分（例如前缀），并在描述该组件的HTML模板中，将id的值加⼊到HTML标签的属性中。当应⽤程序在Chrome浏览器中运⾏时，在使⽤Chrome开发者⼯具的"元素"模块中的元素探测功能查找HTML时，可以很直观地看见每⼀个div对应的JS⽂件。因此，当某⼀个div出现问题时，对其HTML进⾏探测后，便可根据其中的id定位到相应的脚本⽂件，从⽽使问题调试的范围⼤⼤缩⼩。以下通过实际项⽬中的例⼦加以说明。清单1.Dojo中⾃定义widget引⼊id的声明⽅式dojo.declare("exc.fe.bijits.FeLogon.FeLogonLogonPanel",[exc.kc._Bijit,dojox.dtl._Templated,],{templatePath:dojo.moduleUrl('exc.fe.bijits.FeLogon',"FeLogonLogonPanel.html"),select:null,SESSION_ID_OFFSET:0,sessionid:null,launchType:"StandardLogin",langcnt:0,currentLang:null,……//省略之后不相关的⽅法和属性……});在清单1中给出的是使⽤Dojo创建⾃定义widget并将该widgetid引⼊其模板HTML中的⽅式。⾃定义的widget在继承了dojox.dtl._Templated之后，Dojo有内部机制可将该widget声明的名称作为id⾃动加到其HTML模板中。因此开发⼈员只要保证该widget声明的名称与其所储存的⽂件名对应即可。清单1中的id与储存该脚本的⽂件名均为"exc.fe.bijits.FeLogon.FeLogonLog--onPanel"。在此前提下，打开浏览器运⾏⽹页加载该widget后，使⽤Chrome开发者⼯具的⽹页元素探测功能找到该widget，便可看见其id，即相应的脚本⽂件，如图1所⽰。如若该widget中的⾏为出现异常，例如userid不能进⾏校验，便可打开其相关的脚本⽂件进⾏调试。图1.查看widget在HTML模板中的id查看widget在HTML模板中的id开启运⾏时错误⾃动暂停功能，准确定位出错脚本位置在Chrome开发者⼯具中，可以开户运⾏时错误⾃动暂停这⼀功能（如图2所⽰），从⽽使开发者⼯具能在发现运⾏时脚本异常时，在异常脚本处暂停运⾏，跳转⾄调试页⾯，供开发⼈员进⼀步查找该运⾏时异常产⽣的原因。图2.Source⾯板中的⾃动暂停按钮Source⾯板中的⾃动暂停按钮⾃动暂停按钮的下⽅有⼀个选项，PauseOnCaughtExceptions，如果勾选上，则即使所发⽣运⾏时异常的代码在try/catch范围内，Chrome开发者⼯具也能够在错误代码处停住。合理添加调试⽇志，通过Console标签页定位在进⾏脚本开发过程中，在重要的⽅法中添加必要的调试⽇志输出语句，可以⽅便开发⼈员进⾏问题定位与调试。清单2中的JavaScript脚本⽅法中，在其开始和结束处添加了debug级别的⽇志输出，从⽽使该⽅法在被执⾏时，可在Console标签页找到相关⽇志，并且能通过点击该⽇志的末端件链接直接跳转到Source标签页的脚本源⽂件中，极⼤⽅便了相关代码的定位，如图3所⽰。清单2.Dojo中⾃定义widget引⼊id的声明⽅式_containerSelect:function(/*ContentPane*/cp){varF=this.declaredClass+"._containerSelect():";console.debug(F,"Starting:",cp);//当⽅法被执⾏时，在控制台输出相关⽇志dojo.forEach(this.children,function(child){if(cp.id===child.targetId){this.showChild(child.id);//--Saverequestedmodulethis._history.push(child.id);//kakif(this.globalArgs._showModuleTopic)dojo.publish(this.globalArgs._showModuleTopic,[child.id,"open"]);}},this);console.debug(F,"End");//当⽅法执⾏结束后，在控制台输出相关⽇志},图3.Console⾯板中的⽇志输出Console⾯板中的⽇志输出使⽤Chrome开发者⼯具调试JavaScript的技巧与⼼得上介绍了3种定位相关脚本的⽅法，在定位脚本之后，通常会对脚本中的部分代码进⾏调试，本章主要详细讲解⾼效快捷地利⽤Chrome开发者⼯具进⾏JavaScript脚本调试的⼏种技巧与⼼得。设置条件断点与Java调试类似，Chrome开发者⼯具提供了断点设置、删除与断点存储等基本功能。同时，开发者⼯具也提供了设置条件断点的功能，使开发者可以控制该断点只有在满⾜某⼀条件时才会被触发。条件断点的设置如图4所⽰，在所需要设置断点的⾏最前端的⾏号处点击右键，选择添加条件断点后，会弹出⼀个对话框⽤于输⼊具体的条件。合理运⽤好条件断点能够提⾼调试的效率与准确性，使开发⼈员能更专注于在期望的场景下进⾏调试。图4.Source⾯板中添加条件断点Source⾯板中添加条件断点修改JavaScript件中的代码这是Chrome开发者⼯具提供的⼀种⾮常实⽤的功能，即使开发⼈员可直接对开发者⼯具的Source标签页中的代码进⾏修改，并将其保存，使浏览器在下次执⾏该段脚本时，直接加载最新修改的版本。⽬前的Firebug及IE⾃带的开发者⼯具都不⽀持对脚本的直接修改，导致在Firefox或IE中调试脚本时，如果需要对代码进⾏修改，需要先去修改脚本源⽂件，再同步⾄应⽤服务器，再清理浏览器缓存，最终再次打开应⽤程序时，才会看到代码修改后的效果。可见Chrome开发者⼯具提供的这⼀功能，⼤⼤提供了开发者调试脚本的效果。需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源⽂件。当开发⼈员决定采⽤修改之后的脚本时，需要将其复制到脚本的源⽂件中。使⽤控制台打印变量值或⽅法的返回结果当断点被触发进⼊到调试模式时，我们可以将当前任意存在的变量或⽅法输⼊到控制台中，按下回车后，控制台便会返回相关的结果。该功能可使开发⼈员⽅便了解程序运⾏⾄断点处时各个所需要变量或⽅法的返回值。需要注意的是，当在控制台中输⼊的⽅法名字不带括号时，控制台输出的是该⽅法所包含的代码信息，⽽并不是运⾏结果。结合Element标签页调试JavaScript中对CSS的控制在⽹页开发过程中，经常需要在脚本中控制不同条件下页⾯的样式展⽰，例如要求某⼀个按钮的颜⾊在⽤户停留⼗秒钟之后由⽩⾊变成灰⾊。此时我们便需要在脚本中通过具体的数值指定这个"灰⾊"该如何表⽰，⼀般情况下我们需要查找相关资料或使⽤其他⼯具才能得到期望的"灰⾊"所对应的RGB数值或⼗六进制数值。然⽽在Chrome开发者⼯具的Element标签页中，其实已经提供了包括该功能在内的⼀系列对样式进⾏实时修改的功能