developerWorks 社区
JavaScript 的调试工具在近年来有了长足发展，几乎每一款主流浏览器都配备了专门的调试工具。Google 的 Chrome 浏览器自带了 JavaScript 调试工具 developer tools（以下统称开发者工具）。这款工具在易用性、稳定性和调试效率方面并不逊于其他常用调试工具（如 FireBug），并且它增加了很多其他工具所不具备的新功能。本文着重从调试 JavaScript 代码的角度，详细介绍如何通过 Chrome 的开发者工具高效、准确地进行 JavaScript 问题定位与调试。
, 软件工程师,
王传阳，软件工程师，计算机软件硕士，就职于 IBM 中国开发中心宁波分公司，目前从事 J2EE 项目开发与客户支持工作 , 对 IBM 产品及开源软件研究方面有深入研究。
引言Google Chrome 是由 Goole 公司开发的一款网页浏览器，自 2008 年 9 月第一个测试版本发布以来，其市场占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成为全球市场占有率第二的浏览器。Chrome 的受欢迎程度与其优秀的性能与兼容性密不可分，并且越来越多的网络应用程序都添加了对 Chrome 的支持，也足以体现网络应用的开发人员对 Chrome 的认可与青睐，而其中最重要的原因之一，莫过于 Chrome 所提供的强大的开发者工具。Chrome 开发者工具包含诸多强大的功能模块，适应于多个不同场合的需要。本文先简单介绍 Chrome 开发者工具的各个模块及其基本功能，再着重针对网页脚本调试，阐述如何巧妙运用 Chrome 开发者工具定位与调试问题。（本文所选的 Chrome 开发者工具为 Chrome V35 版本中内置，较之前版本可能略有不同，请留意）Chrome 开发者工具介绍虽然对于 Chrome 开发者工具的介绍，Google 官方以及互联网中都有众多文章进行阐述，但为了有助于读者更好地理解本文后面对如何巧妙运用开发者工具定位及调试脚本的阐述，在此对开发者工具中的各个模块做一个概要性的介绍。如果对其中某些模块特别有兴趣，请参考文末的链接，从中进行深入了解。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.
查看 widget 在 HTML 模板中的 id开启运行时错误自动暂停功能，准确定位出错脚本位置在 Chrome 开发者工具中，可以开户运行时错误自动暂停这一功能（如图 2 所示），从而使开发者工具能在发现运行时脚本异常时，在异常脚本处暂停运行，跳转至调试页面，供开发人员进一步查找该运行时异常产生的原因。图 2. Source 面板中的自动暂停按钮自动暂停按钮的下方有一个选项，Pause On Caught Exceptions，如果勾选上，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。合理添加调试日志，通过 Console 标签页定位在进行脚本开发过程中，在重要的方法中添加必要的调试日志输出语句，可以方便开发人员进行问题定位与调试。清单 2 中的 JavaScript 脚本方法中，在其开始和结束处添加了 debug 级别的日志输出，从而使该方法在被执行时，可在 Console 标签页找到相关日志，并且能通过点击该日志的末端文件链接直接跳转到 Source 标签页的脚本源文件中，极大方便了相关代码的定位，如图 3 所示。清单 2. Dojo 中自定义 widget 引入 id 的声明方式_containerSelect : function( /*ContentPane*/ cp ) {
var F = this.declaredClass + "._containerSelect(): ";
console.debug(F,"Starting: ", cp);//当方法被执行时，在控制台输出相关日志
dojo.forEach( this.children, function(child) {
if ( cp.id === child.targetId ) {
this.showChild( child.id );
//-- Save requested module
this._history.push( child.id );
if(this.globalArgs._showModuleTopic)
dojo.publish(this.globalArgs._showModuleTopic, [ child.id,"open" ]);
console.debug(F,"End");//当方法执行结束后，在控制台输出相关日志
},图 3. Console 面板中的日志输出使用 Chrome 开发者工具调试 JavaScript 的技巧与心得上文介绍了 3 种定位相关脚本的方法，在定位脚本之后，通常会对脚本中的部分代码进行调试，本章主要详细讲解高效快捷地利用 Chrome 开发者工具进行 JavaScript 脚本调试的几种技巧与心得。设置条件断点与 Java 调试类似，Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。同时，开发者工具也提供了设置条件断点的功能，使开发者可以控制该断点只有在满足某一条件时才会被触发。条件断点的设置如图 4 所示，在所需要设置断点的行最前端的行号处点击右键，选择添加条件断点后，会弹出一个对话框用于输入具体的条件。合理运用好条件断点能够提高调试的效率与准确性，使开发人员能更专注于在期望的场景下进行调试。图 4. Source 面板中添加条件断点修改 JavaScript 文件中的代码这是 Chrome 开发者工具提供的一种非常实用的功能，即使开发人员可直接对开发者工具的 Source 标签页中的代码进行修改，并将其保存，使浏览器在下次执行该段脚本时，直接加载最新修改的版本。目前的 Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE 中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存，最终再次打开应用程序时，才会看到代码修改后的效果。可见 Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时，需要将其复制到脚本的源文件中。使用控制台打印变量值或方法的返回结果当断点被触发进入到调试模式时，我们可以将当前任意存在的变量或方法输入到控制台中，按下回车后，控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。需要注意的是，当在控制台中输入的方法名字不带括号时，控制台输出的是该方法所包含的代码信息，而并不是运行结果。结合 Element 标签页调试 JavaScript 中对 CSS 的控制在网页开发过程中，经常需要在脚本中控制不同条件下页面的样式展示，例如要求某一个按钮的颜色在用户停留十秒钟之后由白色变成灰色。此时我们便需要在脚本中通过具体的数值指定这个"灰色"该如何表示，一般情况下我们需要查找相关资料或使用其他工具才能得到期望的"灰色"所对应的 RGB 数值或十六进制数值。然而在 Chrome 开发者工具的 Element 标签页中，其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能，并且在修改之后能够立即从页面中看到变化。图 4 给出的是 Element 标签页的右半部分，当要对某个样式类中的颜色进行修改时，它提供出一个非常直观的图谱供选择，并在下方将其十六进制代码显示出来。开发人员可直接在此进行颜色选择，确定颜色后，在 JavaScript 代码中引用其十六进制数值即可。图 5. Element 面板中的颜色样式编辑结语Chrome 开发者工具的功能丰富而强大，本文着眼于对 JavaScript 的定位与调试，介绍了其中的技巧与心得。相对于 Firebug 与 IE 开发者工具而言，Chrome 所提供的一些独特功能如对脚本源码的直接修改，极大方便了开发者对脚本的开发与调试。随着 Chrome 新版本的推出，相信其开发者工具的功能也会日益增强，我们可以通过阅读其官方更新说明，了解到新功能，借助 Chrome 开发者工具的支持，提高网页应用程序开发与调试的效率。
查看，了解最新版本 Chrome 中开发者工具的更新内容。关注，了解 Chrome 及开发者工具的最新发展动态。
阅读文章 ，了解更多 Chrome 开发者工具各模块之间的功能。
阅读文章 ，进一步了解开发者工具各模块之间的具体功能与用法。：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。查看 ，了解更多和 HTML5 相关的知识和动向。加入 。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
文章、教程、演示，帮助您构建、部署和管理云应用。
立即加入来自 IBM 的专业 IT 社交网络。
免费下载、试用软件产品，构建应用并提升技能。
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=985818ArticleTitle=使用 Chrome 开发者工具进行 JavaScript 问题定位与调试publish-date=Web前端（10）
调试页面的动态js脚本，目前浏览器支持不一。不过每个浏览器确实都提供了解决方案，需要我们自己去发现和学习，否则它会像你无视它的亮点一样，掣肘我们的开发进度。它就在那里，你发现了它；它才会帮助你。
我这里介绍下，我自己知道的解决方法：
1. debugger神器
横扫各个浏览器。脚本运行到debugger语句位置，即跳入调试页面（好像只有chrome可以不做任何配置的，在动态js脚本里做到）。
2. //@ sourceURL=dynamicScript.js 神语句
在js脚本第一行加入//@ sourceURL=dynamicScript.js语句。其中dynamicScript名字可以自定义。这样，在代码加载过脚本后即可在开发者工具的（chrome）sources或者调试器（firefox）里找到名字为dynamicScript.js脚本文件。就可以像调试静态脚本一样方便。
3. 无视以上两项
目前在IE11，firefox的firebug和chrome里都可以通过一定方法，找到动态脚本的文件。
a. IE11在动态脚本里可以找到，名字一般为eval(XX)的形式
b. chrome里，一般在动态脚本里使用console.log(“test”);输出语句后，在浏览器console里看到输出后，点击后面的链接，即跳入动态脚本。名字一般为vmXXX。
c. firefox里使用firebug的脚本里可以找到。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：41824次
排名：千里之外
原创：42篇
(3)(3)(2)(1)(1)(1)(2)(1)(2)(3)(1)(1)(1)(1)(1)(3)(1)(2)(1)(1)(2)(1)(1)(2)(1)(2)(2)(2)(1)(2)(1)(1)js代码调试方法总结
代码调试是一个编程人员的基本功，几乎每一个编程人员都会遇到代码错误。遇到错误我们该怎么办呢？首先，在写程序的时候就要细心，尽量避免书写错误；其次，遇到错误时不要慌张，静下心来看一下错误提示，一般的错误很快就能解决；最后，利用工具分析，根据经验解决。
js代码是中很多时候某个地方出现一个小错误就会导致整段代码无法运行，下面我们来介绍几种常用的调试方法:
一、Firebug工具
点击右下角的图标即可打开Firebug界面
在界面中可以点击脚本查看js代码，另外可以设置断点，一步步进行跳入，同时观看右侧的变量值，逐步排查错误。
二、IE浏览器中的调试
（1）IE开发人员工具来调试代码，同Firebug一样开发人员工具也具有设置断点的功能
（2）在程序代码出错时，IE左下角会有一个错误提示图标，双击后会出现具体的错误提示
三、alert（）;方法
当你的程序运行不出来时，可以在你认为可能出错的地方加上一句alert("没有错误！");如果再次运行程序是可以弹出这句话，那么说明这句以上的程序代码没有出现错误，再把alert("没有错误！");这句代码下移，直到不弹出“没有错误”这句话位置，那么错误就出现在最后一次alert("没有错误！")与上一次alert("没有错误！")之间。
希望上面的方法能对大家有所帮助！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。IE11如何调试JS win7/win8系统调试IE浏览器脚本教程
当前位置：//IE11如何调试JS win7/win8系统调试IE浏览器脚本教程
IE11的新特性包含了全面支持HTML5、CSS3、WebGL，全新的F12开发者工具，但还是会遇到例如“IE11调试JS时兼容问题、IE11无法启动断点调试前台js代码”等问题，下面的教程将详细告诉大家IE11浏览器如何调试JS脚本。1）首先来看一下目前IE11存在的一些js兼容问题。2）其次来确认一下笔记本的系统信息3）登入我们的系统(为了信息安全，图片进行了简单处理)4）在IE11默认的打开的方式下，鼠标单击任何按钮都是没有效果的，如图单击日志查询后再单击设备管理，可以看到页面是没有响应事件的。此时我们需要激活IE11下的兼容模式来浏览本页面。进入IE11的兼容模式1）在IE11页面内按F12打开全新的开发者工具。在左侧找到仿真功能，里面设置文档模式与用户字符串都改为IE7的模式，这样就进入了浏览器的兼容模式，此时再回到刚才的页面点击日志查询按钮可以看到下面已经响应了js事件。现在找到我们需要调试的页面中js脚本1）打开我们需要进行调试的页面，在开发者工具中的DOM资源管理器中使用选择元素按钮，选出我们的文档位置。2）在DOM资源管理器中找到 我们的js脚本位置，因为是在DOM资源管理器中打开的，所以在这里只能看不能操作，我们打开的js也是用文本的方式呈现出来的。通过上面一步，如果能够定位到我们的js代码就已经确定可以进行js的debug调试了。1）打开开发者工具中的调试程序功能。2）点击左上角的文件夹图标，找到我们的js代码到这里为止，我们的IE11浏览器就能帮我们调试js代码啦。还有另一种方式来调试js脚本就是借助非IE的但是用IE内核做成的浏览器，比如360极速浏览器。在兼容模式下，F12进入开发者工具，就会见到我们熟悉的画面了。IE11浏览器如何在win7/win8系统下调试JS脚本的教程就到这里了，希望对你有所帮助，感谢关注IE浏览器中文网站！
&&&&&&&&&&&&&&&&&&&&ie浏览器不能运行js&JS代码失效不能运行了怎么办
ie不能运行js,在ie浏览器js代码失效，js不能运行了怎么办，一些网站里面的js殊效不能使用了，一些效果都没法显示出来。
假如你的ie不能打开js脚本（连系统里所有的js文件都不运行，网页上的js广告或好多页面都显示不了），请按一下步骤进行排查与解决：
1.查看是否IE的安全里面禁止了JS的运行：
将工具=&internet选项==&高级=&禁止脚本调试往勾,显示脚本显示提示打上勾,假如还没反应
2.看是否装了杀毒软件禁止了用程序打开窗口,检查设置.
3.手动修复IE浏览器:开始→运行,分别输进以下内容：
regsvr32 Shdocvw.dll ==》确定
regsvr32 Oleaut32.dll ==》确定
regsvr32 Actxprxy.dll ==》确定
regsvr32 Mshtml.dll ==》确定
regsvr32 Urlmon.dll ==》确定
regsvr32 browseui.dll ==》确定
a、同时运行以上命令不仅可以解决IE不能打开新的窗口，用鼠标点击超链接也没有任何反应的题目；
b、还能解决大大小小的其它IE题目，比如网页显示不完整，JAVA效果不出现，网页不自动跳转，打开某些网站时总提示‘无法显示该页’等。
4.假如还是不行，应该是JS脚本没有注册或者JS脚本被卸载的原因
开始→运行,输进以下内容：输进 regsvr32 jscript.dll ==》确定
输进regsvr32 vbscript.dll==》确定
5.假如以上设置没有题目或是还不能解决js脚本不执行的题目，请把以下代码用记事本的形式编写,而后再以*.bat的后缀保存.
rundll32.exe advpack.dll /DelNodeRunDLL32
%systemroot%\System32\dacui.dll
rundll32.exe advpack.dll /DelNodeRunDLL32
%systemroot%\Catroot\icatalog.mdb
regsvr32 /s comcat.dll
regsvr32 /s asctrls.ocx
regsvr32 /s oleaut32.dll
regsvr32 /s shdocvw.dll /I
regsvr32 /s shdocvw.dll
regsvr32 /s browseui.dll
regsvr32 /s browseui.dll /I
regsvr32 /s msrating.dll
regsvr32 /s mlang.dll
regsvr32 /s hlink.dll
regsvr32 /s mshtml.dll
regsvr32 /s mshtmled.dll
regsvr32 /s urlmon.dll
regsvr32 /s plugin.ocx
regsvr32 /s sendmail.dll
regsvr32 /s mshtml.dll /i
regsvr32 /s scrobj.dll
regsvr32 /s corpol.dll
regsvr32 /s jscript.dll
regsvr32 /s msxml.dll
regsvr32 /s imgutil.dll
regsvr32 /s cryptext.dll
regsvr32 /s inseng.dll
regsvr32 /s iesetup.dll /i
regsvr32 /s cryptdlg.dll
regsvr32 /s actxprxy.dll
regsvr32 /s dispex.dll
更多知识:来自：---身边最好的生活网站!
相关文章：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}