Js的常用调试方法整理集合 全面详细

1、Js的常用调试方法整理集合 全面详细JSP的编译器指引与指令组件 编译器指示<% 编译器指示 %> 声明<%! 声明 %> 表达式 <%= 表达式 %> 程序代码段/小型指令<% 程序代码片段 %> 注释<%- 注释 -%>下面的方法是自己总结的，也许有误，欢迎指正。方法1 使用alter(方法或者document.write(方法如果要中断代码的运行，监视变量的值，则使用alert( 方法；如果需要查看的值很多，则使用document.write( 方法，避免反复单击“确定”按钮；方法2使用 window.onerror = fun

2、ction(sMessage,sUrl,sLine;Onerror函数的三个参数用于确定错误确切的消息，代表的意思依次为：错误信息、发生错误的文件、发生错误的行号。首先将testError方法绑定给onerror事件，然后在test方法里触发一个错误，当出错时函数testError捕获到了三个参数，通过将函数绑定到onerror事件就可以在页面出错时捕获以上三个参数。方法3 trycatch(e语句方式例如： 但是try catch并不能很好的来处理javascript的语法错误方法4使用相关调试工具，如IE Microsoft Script Debugger首先打开Internet选项高级，

3、将“禁用脚本调试（Internet Explorer）”的勾去掉 如果想其他浏览器也启用调试，那么可以把“禁用脚本调试（其他）”的勾也去去掉。 然后在你想需要地方进行调试，就加入debugger。在程序中添加一个debugger; 这个就相当于一个永久的断点，每次运行的时候都会进入到这里，除非你将debugger;这个删除或者注释掉，才不会进入到这个断点这里。方法5 IE8自带的开发人员工具“开发人员工具”默认是关闭的，必须手动打开。方法是点击“工具”菜单中的“开发人员工具”，或者直接按F12键。开发人员调试工具可以调试CSS，HTML,脚本,探查器等，可以设置断点来进行调试，其调试方式跟VS

4、差不多。模式,JS调试,探查器在上一篇文章IE8“开发人员工具”使用详解上(各级菜单详解中，我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法，相信很多朋友应该已经使用上了。而IE8开发人员工具更强劲的功能例如：如何测试版本兼容性、如何利用开发人员工具调试JavaScript脚本，以及如何利用探查器检测页面脚本函数效率等，我们将在本篇文章中讲解。小弟拙笨，此处仅为抛砖。 浏览器模式应了无间道的那句话“出来混，迟早是要还的！”。IE6种下的苦果，现在果然到了要咽下的时候了。当IE8发布的时候，他不得不面对着世界上成千上万“只有在IE6中才能正常显示”的页面。不发布IE8了吧，FireF

5、ox和Chrome又跟着后面抢蛋糕；不管那些“IE6 only”的页面吧，那浏览器出来还不被人骂死；让所有的站长都把页面重构吧，想想自己都要笑。唉，这可咋整呀。唉，有了，咱采取一个手段，让用户自己去处理，如果他碰到了“IE6 only”页面，就让他自己手动处理一下，让浏览器还用老的渲染模式渲染页面，这虽然麻烦了一点用户，但是也不失是个办法。于是“浏览器模式”出来了。说白了，就是让用户选择当前页面用何种IE版本去渲染。举个例子吧，顺便练习一下IE的有条件注释详解，核心代码如下让我们来试试这个页面，在不同的浏览器模式下的显示效果吧 IE8开发人员工具之浏览器模式对于普通用户，微软官方推荐的是这个玩

6、意兼容性视图按钮。当然，对前端开发人员来说，这个工具主要用来测试页面多浏览器兼容性而已。但是非常遗憾的是：没有IE6模式。没有IE6的世界，虽然是一个美好的愿望，但是可惜的是：我们生活在现实之中，或许说生活在地狱中更确切。所以，我还是不得不提下面的两个工具IE多版本共存的解决方案IETester微软网页开发调试利器SuperPreview（附下载） 文本模式说起“文本模式”这个名词，这又要回到渲染页面的3种模式了：诡异模式（Quirks mode，也有翻译为兼容模式、怪异模式的），标准模式（Standards mode），和几乎标准模式（Almost standards mode）。这是一个非

7、常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚，这样说吧“页面的不同渲染模式，将直接影响页面的最终呈现效果 ”，也就是说，一个页面如果在这种模式下显示完美，但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。乖乖，这玩意太绕人了，还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图，是相同页面，采用不同页面渲染模式的最终显示效果。页面很简单，只要一个div元素，然后随便设置一点高度、宽度、padding、margin就可以了。核心代码如下IE8开发人员工具之文本模式从图片中，我们可以清楚的看到，红色div块的大小和位置，在不同的文本模式

8、下，发生了明显的变化。关于文本模式的详细资料，我建议你看这篇文章Quirks mode、Almost standards mode、Standards mode。虽然是英文原版的资料，也绝对值得翻着字典看完。还有这篇视频教程中，我也有较为详细的介绍到，“阿一web标准学堂”第4课利用IE8开发人员工具调试JavaScript脚本重头戏来了。很多朋友梦寐以求的功能呀JavaScript脚本调试。一直摆脱不掉FireFox，就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。但是，很多前台开发人员并不会为了一个JavaScript调试功能而去安装那

9、种大家伙。所以对JavaScript的调试，IE的用户一直耿耿于怀。但是，现在终于可以平息了。因为IE8开发人员工具终于也有了小巧，却功能强大的JavaScript调试功能。不多说，直接上例子，这里就举一个简单到弱智的例子吧。核心代码如下：Button还是让我们先看看脚本调试界面吧利用IE8开发人员工具调试JavaScript脚本图上的说明已经很清楚了，下面就详细讲一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图吧。控制台在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。恩，其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运

10、行。如果一行不够的话，可以切换到多行模式。输入完毕后，点击“运行脚本”，就可以看到运行结果了。断点是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。局部变量我非常喜欢的视图之一。可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的事情，就是一个个的看下去，看到不知道的就去查资料，绝对是个学习JavaScript的好方法。例如，下面途中这就发现了一些IE8特有的方法。监视我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已调用堆栈可以直观地显示函数调用堆栈情况，以及现在

11、执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助。IE8开发人员工具的探查器“探查器”这玩意一开始还真的让我摸不到头脑，还以为是类似那些国产的，用在马桶或者世界之窗上的插件，用来分析出网页中的flash或者视频、音频地址的呢。到后来，看到的英文原版的才知道，其实就是“Profiler”。用过微软SQL数据库中的Profiler的朋友都知道，那个一个帮助SQL分析效率的工具。它会记录所有的执行以及他们的执行时间，从而提供一份报表。这样，就可以知道到底是什么在效率上拖l了后腿。IE8 的探查器(Profiler，也引入了这个概念，只是它探测的是JavaScript脚本而已。先点击【开始配

12、置文件】按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷新完毕后点击【停止配置文件】按钮，就会生成探查报告了。它提供两种视图，一种是“函数”，另一种是“调用树”。无论何种视图，都可以清晰且忠实的展现出各个函数的执行所用时间。从而，方便你分析出“为啥我的页面那么慢呢？”函数视图函数视图可以方便的按照各个参数进行排序，从而方便的找出类似“谁用的时间最长”这样的答案。调用树调用树视图可以方便的看出各个函数之间的调用关系。一些关于IE8开发人员工具探查器(Profiler的资料如果，你还没有过瘾的话，可以看看下面这篇文章，绝对权威。Introducing the IE8 Developer

13、Tools JScript Profiler结束了？其实才刚刚开始虽然貌似很多地、洋洋洒洒地、图文并茂地讲了两篇文章。其实回头看看也没讲什么东西。只是截图滥竽充数比较多而已。好在，文章中不时地，还丢出几个相关文章的链接出来，所以，应该还不至于让人感到“看完以后完全不知所云”的样子。其实工具，仅仅是个工具，再详解、再举例、再截图都是白搭。如果真的想用来提高你自己的工作效率，最终还是需要你自己的动手摸索，用在自己的页面上。所以，看完文章的你，赶紧打开IE8的开发人员工具，现在就试试吧。它一定可以带给你惊喜的。posts - 21,  comments - 21,  trackb

14、acks - 0 Internet Explorer 下的脚本调试器          今天，我想向大家介绍一下 IE 的调试工具，因为经常听到一些刚入门的 JavaScript 开发人员抱怨说，没有好的 JavaScript 开发环境，没有好用的调试器，没有集成的 IDE 工具。2005 年，一个被称做 Aptana 的免费开源项目启动了，但是直到 2006 年底，才为人们所知。新年伊始，对于开发人员来说，这个 Ajax 开发环境无疑是个好消息。本篇不想介绍这个新生儿，我只是想介绍一个被微软藏着掖着，总

15、也不放到明面儿上，让大家都知道的工具“Microsoft 脚本编辑器”。当 IE 被升级到 5.5 以上之后，那个所谓的“Windows Script Debugger”其实已经与 IE 的 JavaScript 开发不兼容了，许多对象的属性值根本无法被正确的监视。但是做为替代品，“Microsoft 脚本编辑器”恰恰可以弥补这个不足，它的强大，足以应付 IE 下网页脚本的开发。这个工具被捆绑在“Microsoft Development Environment”环境中，如果你安装有“Microsoft Visual Studio .NET”，或者“Microsoft Office XP(10

16、.0”以上的版本，你都可以使用这个脚本调试工具。由于这个工具是微软自己开发的，所以运行效率很高，并且与 IE 的兼容性也是最好的。因为“Microsoft Visual Studio .NET”太大了，所以通过 Office 来安装这个工具，就显得特别有意义。安装此工具的方法比较特殊，因为它是通过“Office Word”来引导安装的。下面，通过安装过程的截图，你可以了解到如何安装这个工具。完成上面那个的“Internet 选项”设置之后，关闭所有已经打开的 IE 窗口，然后再运行 IE。你会发现在 IE 的“查看”菜单下，多了一个“脚本调试程序”项，如下图所示至此，“Microsoft 脚本

17、编辑器”便安装完毕了。当你浏览的网页出现脚本语法错误或实时运行错误时，浏览器将自动弹出如下的窗口，提示你是否调试此错误。而当你没有安装此工具前，所有的脚本错误只能通过点击浏览器状态栏的左下角，弹出错误提示窗口来查看，而这显然是“幼稚”的方法，起到的作用也如“盲人摸象”一般。虽然这个工具可以用来解决脚本运行时的错误，但有时我们只想跟踪程序的逻辑，或者熟悉 DOM 对象的 API。也许被跟踪的代码任何错误也没有，或者我们只想看看在某一时刻，某个 DOM 对象的某个属性是否能被访问。在所有的语言调试环境中，通用的方法就是设置“断点”，而这个工具对于“断点”的支持不像 Firebug 或 JavaSc

18、rip Debugger 那样好，可以调出已经装载在当前网页中的任何脚本，以便随时的添加断点。所以，利用“Microsoft 脚本编辑器”动态地设置脚本断点，来进行跟踪调试是非常不方便的。对于这种情况，我们需要在代码中人为地制造一些断点，达到方便调试的目的。比如，有如下的代码片段var person = name: "Lewis", gender: "male", blogURL: "" var years = 2000, 2001, 2002, 2004, 2005, 2006; perso

19、n.employmentYears = years; 以上是一段语法正确的 JavaScript 代码。然而，初学者可能只是想了解对象是如何被实例化，代码是如何被运行的。IE 的 JavaScript 解释器提供了一个保留的 debugger 语句（VBScript 调试的等价关键字是 stop），它可以告诉浏览器调出调试程序，以此达到设置断点的目的。对于上面的代码，假设我想了解一下 person 对象和 years 数组的存储结构，那么我可以在代码的入口处添加一条 debugger 语句，更改后的代码片段如下debugger var person = name: “Lewis”, gende

20、r: “male”, blogURL: “”; var years = 2000, 2001, 2002, 2004, 2005, 2006; person.employmentYears = years; 当代码在浏览器中被装载并运行时，它会解释 debugger 语句，弹出是否调试的窗口。同样，我做了一些截图，用来演示如何达到查看变量存储结构的目的此时，断点停留在 alert(a 那一行，其实这一行是故意添加的错误代码，只是为了产生一个断点。因此，可以像下图那样，跳过此行代码的执行，直接转到给 person 对象赋值那一行。现在，我们可以“逐语句”

21、的单步执行了，这样被监视变量的每一次细微变化，都可以被监视得一清二楚。“工欲善其事，必先利其器”，“君子性非异也，善假于物也”，说得都是这个道理。好了，希望那些在 IE 下开发 JavaScript 的程序员，不会再抱怨没有好的调试工具了，因为利器就在你手中。 posted on 2007-07-20 13:46 分享爱的空间 阅读(875 评论(0  编辑  收藏 JS 错误处理与调试总结在Web开发过程中，编写JavaScript程序时或多或少会遇到各种各样的错误，有语法错误，逻辑错误。如果是一小段代码，可以通过仔细检查来排除错误，但如果程序稍微复杂点，调试JS便成为一

22、个令Web开发者很头痛的问题。下面总结一下JS错误处理与调试的方法方法1：用alert( 和document.write(方法监视变量值。alert(在弹出对话框显示变量值的同时，会停止代码的继续运行，直到用户单击“确定”按钮，而document.writer(则在输出值后继续运行代码。调试JS时可以根据具体情况来选择这种方法。例如下面代码：将数组a中以1开头的数据添加到数组b中DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtm

23、l1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页 title><script type="text/javascript">var a="123","456","789","111"function AlertMessage( var b=new Array("1111"fo

24、r(var i=0;i if(ai.indexOf("1"!=0alert(ai;b.push(ai;script>head><body ><input type="button" value="点我" onclick="AlertMessage("/>body>html>如果加入的值比较多，则可以使用document.writer(方法，避免反复点击确定按钮。方法2：用onerror事件找到错误：当页面出现异常时，error事件会在window对象上触发，它能够在一

25、定程序上告诉开发者出现了错误，并帮助开发者找到错误所在，如下例：DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页 title><script type="text/javas

26、cript">window.onerror=function(alert("不好意思，出错了!"script>head><body onload="NonExist(" >body>html>代码运行body标记的onload事件时调用了一个不存在的函数NonExist(,产生了错误，如下图：同时，浏览器本身的代码调试错误也出现了：要避免浏览器自己的错误提示很简单，只需要要onerror事件的处理函数最后返回ture便可，代码如下：DOCTYPE html PUBLIC "-/W3C/DTD

27、XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页 title><script type="text/javascript">window.onerror=function(alert("不好意思，出错了!"re

28、turn true;/屏蔽系统事件script>head><body onload="NonExist(" >body>html>但这样处理对于解决错误并没有任何的帮助。其实onerror还提供了3个参数来确定错误的性质，代码：DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="

29、;/1999/xhtml" ><head><title>无标题页 title><script type="text/javascript">window.onerror=function(message,url,linealert("不好意思，出错了:n错误提示："+message+"nUrl："+url+"n行号："+line;return true;/屏蔽系统事件script>head><body onl

30、oad="NonExist(" >body>html>在IE运行时的提示：在Firefox运行的提示在IE浏览器中发生error事件时，正常的代码会继续执行，所有的变量和数据都保存下来，并可以通过onerror事件处理函数访问。而在Firefox中，正常的代码执行都会结束，同时所有的错误发生之前的变量和数据都会被销毁.方法3：用try.catch语句找到错误DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/

31、DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页 title><script type="text/javascript">tryalert("这个是try.catch的例子"alert(hello;catch(exceptionvar error=""for(var i in exceptionerror+=i+&q

32、uot;："+exceptioni+"n"alert(error;script>head><body>body>html>IE运行时的提示：Firefox运行时的提示：通过try.catch可以很轻松的找到错误的问题，不过可惜的是该语句并不能很好地处理语句错误。如下例：DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页 title><