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

使⽤Chrome开发者⼯具进⾏JavaScript问题定位与调试 Chrome V35 版本中的开发者⼯具分为 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: Standard Login, langcnt: 0, currentLang:null, ……//省略之后不相关的⽅法和属性 …… }); 在清单 1 中给出的是使⽤ Dojo 创建⾃定义 widget 并将该 widget id 引⼊其模板 HTML 中的⽅式。⾃定义的 widget 在 继承了 dojox.dtl._Templated 之后，Dojo 有内部机制可将该 widget 声明的名称作为 id ⾃动加到其 HTML 模板中。因 此开发⼈员只要保证该 widget 声明的名称与其所储存的⽂件名对应即可。清单 1 中的 id 与储存该脚本的⽂件名均 为exc.fe.bijits.FeLogon.FeLogonLog- -onPanel。 在此前提下，打开浏览器运⾏⽹页加载该 widget 后，使⽤ Chrome 开发者⼯具的⽹页元素探测功能找到该 widget， 便可看见其 id ，即相应的脚本⽂件，如图 1 所⽰。如若该 widget 中的⾏为出现异常，例如 user id 不能进⾏校验，便 可打开其相关的脚本⽂件进⾏调试。 图 1. 查看 w