各类浏览器调试工具使用详解.docx

JavaScript调试技巧之：快速定位Posted in 2009/07/24 00:48h.yongbin1 Comment 赶紧总结一下JavaScript的调试技巧，这次首先是“快速定位”篇。快速定位，其实就是快速定位程序的错误，所以也算是调试。这个在实际的码代码时往往比较实用。大多数情况下，你的js代码不多（少于1000行），只要能迅速发现代码的错误，往往不用复杂的调试。关于常用的快速定位方法，我总结了一下几点，欢迎大家补充。1.使用alertalert其实比较实用。本地调试中，在合适的位置写alert，打出来一些变量，虽然比较土，但是往往事半功倍！另外有一个alert技巧，想看看一个对象中的属性和它的值吗，试试这个：varstr = , i;for (i in obj) str += i + : +obji + n;alert(str);2. 使用地址栏使用地址栏，输入javascript: doSomething()，可以在Runtime时输出或者执行一些代码。输出东西时也使用alert，例如在地址栏输入：javascript: alert(document.getElementsByTagName(a).length);可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数，可以输入例如：javascript: deleteFirstChildNode();3.错误查看器最快捷的错误查看器当属Firefox的错误控制台，快捷键ctrl+shift+j。在你觉得脚本执行不正常时，首先按一下这个快捷键，往往能立刻知道哪里出了问题，并且点一下就能到问题脚本所在的位置，非常方便，强烈推荐！4. 用浏览器的扩展或插件查看错误这个话题比较大，一时说不完，所以先说说用扩展或插件来查看错误。对我来讲，Firebug一般就够用了，比较常见，就不截图了。启用Firebug控制台后，如果页面上js脚本错误，就会立刻在右下角显示出来，点击可以查看错误。有一点需注意，我的Firebug有时会报这个带乱码的错误： ( Location.toString我一直不清楚这个为什么会乱码，但我知道这个是跨域的错误，比较常见。其他浏览器的错误查看器，在这里我也简单总结一下：Chrome错误控制台IE8错误查看器Opera错误控制台Chrome：菜单 开发人员 JavaScript控制台，下方可以看到类似于Firebug的console，在这里可以看到错误和警告信息。Opera：菜单 工具 高级 ErrorConsole，功能比较强大，可以查看各类错误。Safari：4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。IE8：非常不好用，但是也有。开发人员工具 Script标签 点击右边的console。在这个console里可以看到错误信息，但是不太友好。5. console.log在代码中使用console.log，也就是类似于alert，只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log，还有console.error，等等。详见Firebug的console API。6. Console最后正式介绍一下Console，也就是控制台。Life is short, use console！以Firebug的console为例，把几个常用功能介绍总结一下： 查看js对象输入一个名字，例如window，window对象就会出现在结果中。这时可以点击这个window对象！点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了，方便吧！ 查看DOM对象输入document.getElementById(“el_id”)，这时el_id这个元素就会出现在结果中，点击可以看到它的详情，例如看看它当时的HTML代码。 在Runtime执行脚本输入任何的js代码，立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。关于这个console，在输入js脚本时，别忘了按tab键进行代码自动补齐哦！代码补齐和提示功能，在Chrome、Safari和Opera里同样有效，IE8就惨点了。Chrome和Safari做的也非常好，大家可以试一下啊。简而言之，掌握快速定位，可以迅速解决JavaScript开发中的琐碎问题，以上办法中，我的建议是，遇到问题先用错误查看器看一下，不行再使用Console，基本上就能很快定位问题原因了！Firefox,JavaScriptChrome,Debug,Firebug,Firefox,IE8,JavaScript,Opera,Safari,调试You can follow any responses to this entry through theRSS 2.0feed. You canleave a response, ortrackbackfrom your own site.1 Comment JavaScript调试技巧之：断点调试(1) | Thinking for Funsays:2009/08/04 at 00:26. 如果您还没有阅读JavaScript调试技巧之：快速定位，建议先看看那篇。说不定，用快速定位就能解决问题了，呵呵。这次我会总结记录一下断点调试的笔记，希望也对大家有用，欢迎补充交流！ .Leave a Replyjavascript脚本调试方法小结相信大家试过编写javascript脚本时发生这样或那样的错误，但是js并没有很好的调试方法，在这里介绍两个方法。1、 alert方法这也是十分原始的方法，但调试起来十分麻烦。2、 debugger方法首先打开Internet选项高级，将“禁用脚本调试（Internet Explorer）”的勾去掉如果想其他浏览器也启用调试，那么可以把“禁用脚本调试（其他）”的勾也去去掉。然后在你想需要地方进行调试，就加入debugger，如debugger;var s=debugger可调试;alert(s);用ie打开该页面，就会出现自动调用VS2005进行调试.点击是，像平时一样按F10或F11就可以进行调试了关键词：javascript脚本调试方法JavaScript调试技巧之：断点调试(1)Posted in 2009/08/04 00:26h.yongbin2 Comments 如果您还没有阅读JavaScript调试技巧之：快速定位，建议先看看那篇。说不定，用快速定位就能解决问题了，呵呵。这次我会总结记录一下断点调试的笔记，希望也对大家有用，欢迎补充交流！首先，在各个浏览器中，断点调试支持的最好的当然是Firefox，Firefox不仅可以使用Firebug调试页面js脚本，还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外，Firefox还支持一些更为高级的断点调试、变量监视功能。其他浏览器里，Opera、Chrome和Safari的调试功能也比较好用。Opera的DragonFly速度相对比较快，界面清爽，功能强大，但不如Safari等友好。相比来说，IE8的程序员工具简直没法用。这次时间有限，先来总结一下Firefox下的调试技巧。1. 使用Firebug进行断点调试使用Firebug调试JavaScript非常方便。具体步骤：a. 打开Firebug后，启用“脚本”调试，找到引用的脚本文件（或者行内js）；用Firebug找到要调试的脚本（点击放大）b. 在适当的位置加入断点；c. 如果断点已经执行过，则刷新页面，这时脚本就会在断点处中断。如果断点没有执行过，那可以直接执行页面上的动作（例如点击按钮等），然后代码会在断点处中断；用Firebug进行断点调试（点击放大）d. 观察函数调用栈，观察local变量，也可以进行单步执行，进行调试。确实非常简单！用Firebug断点调试的优点总结如下： 能加断点的行用绿色行号，非常直观； call stack用两种方式显示出来，很方便； 本地变量的显示非常清晰明了。2. 使用JavaScript Debugger进行断点调试这是老牌的调试工具，之前叫做Venkman，可以以扩展形式安装在Firefox上，我们在这里就称他为Venkman吧。它不仅能够调试页面脚本，还能调试Firefox扩展（extension）里的js。我们在做Firefox扩展开发时，Venkman是必不可少的工具，老田强力推荐！当然，Firefox本身的逻辑实现，也是用JavaScript来做到的。我们现在可以用Venkman来调试一下Firefox本身。Firefox的核心js是browser.js，在这个路径下：chrome:/browser/content/browser.js我们打开Venkman之后，在Loaded Scripts里填入browser.js，这个js文件就会被过滤出来（如果没有看到browser.js，那么你可能需要查一下是否选上了Debug-Exclude browser files）。Venkman：选择要调试的js文件（点击放大）我们找到让浏览器后退的代码，然后点击Firefox的后退按钮，这时Venkman就会停在BrowserBack方法上！让我们再一步一步地看一看，Firefox自己到底做了什么。btw，实现Firefox的js代码也不是很漂亮嘛用JavaScript Debugger断点调试Firefox（点击放大）Venkman当然也带有一个console，利用这个console，我们可以看一看浏览器层次的window和document都是什么东西。类似于Firebug和其他浏览器的console，只要直接输入js代码片段即可！使用Venkman自带的console（点击放大）有兴趣的话，可以在这里发现更多有关Firefox开发（以及扩展开发）的好玩的东西！3. 使用debugger在程序中加入断点另外还有一个少为人知的断点加入方法。我们可以在程序中加入debugger语句，这样Firefox的调试工具会停留在这条语句上，代码也暂停执行，和加入断点的效果一样。例如：var myfunc = get_field_value_callback : function() debugger; var ed = this, target = ed.currSpan; /* do something more */ 这时重新加载页面，断点就会停留在debugger语句上。这样，我们就可以在写代码时随心所欲地加入断点了。另外，其他浏览器（包括IE8！Surprise！）同样支持debugger语句！JavaScriptBrowser,Debug,Firebug,Firefox,JavaScript,调试You can follow any responses to this entry through theRSS 2.0feed. You canleave a response, ortrackbackfrom your own site.2 Comments JavaScript调试技巧之：断点调试(2) | Thinking for Funsays:2009/08/04 at 14:31. 上次总结了Firefox下进行JavaScript断点调试的技巧，这次来看一下其他浏览器下的调试。一点说明，这里的调试技巧都不借助于浏览器之外的工具，例如Aptana，VS2008等。如果要找这方面的一些资料，我这里没有哈。 . RICARDOsays:2010/07/07 at 03:36PillS. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. High quality drugs. Order pills onlineBuy:Benicar.Ventolin.Female Pink Viagra.Prozac.Lasix.Zocor.Zetia.Wellbutrin SR.SleepWell.Cozaar.Seroquel.Female Cialis.Lipitor.Nymphomax.Amoxicillin.Acomplia.Advair.Lipothin.Buspar.Aricept.JavaScript调试技巧之：断点调试(2)Posted in 2009/08/04 14:31h.yongbin2 Comments 上次总结了Firefox下进行JavaScript断点调试的技巧，这次来看一下其他浏览器下的调试。一点说明，这里的调试技巧都不借助于浏览器之外的工具，例如Aptana，VS2008等。如果要找这方面的一些资料，我这里没有哈。其他浏览器，主要是Opera, Safari, Chrome和IE8。这之中除了IE8，它们的调试功能都挺不错的，基本都可以搜索脚本，加入断点，查看调用栈、本地变量，以及强大的console。1. 使用Opera的Dragonfly进行断点调试使用Opera Dragonfly进行断点调试打开Tools Advanced Developer Tools，即可看到类似于Firebug的开发工具，名字叫做Dragonfly，也就是蜻蜓。在这里可以查看页面结构，查看网络交互，以及断点调试，并且可以在调试过程中使用Command Line(console)。Opera on WindowsXP也属于YUI要支持的A-grade（详见此表格），所以我们在开发的时候，也要尽量去支持。此外Dragonfly的DOM查看工具有一个亮点，Export current DOM view。我们可以在线做一些DOM改动，然后Export一下，即可得到改动后的HTML代码，非常方便。2. 使用Chrome和Safari进行断点调试如果你觉得Opera太小众，那么你可以在Safari或者Chrome上进行调试。两个浏览器的调试方式、界面极其相似，所以这里以Safari 4.0为例。打开Menu Develop Start Debugging JavaScript，即可弹出一个调试工具。值得一提的是，Safari和Chrome的调试工具最好不要Dock到浏览器下面，因为弹出来的话，调试界面是刚刚好的。首先找到要调试的脚本：使用Safari进行JavaScript调试：找到脚本设置断点，重新加载页面（或者执行动作）：使用Safari进行JavaScript调试：设置断点在右侧查看本地变量和函数调用栈：使用Safari进行JavaScript调试：变量查看Safari的调试工具一个亮点是，console和断点调试在同一个界面上，这样可以非常方便地在程序中断时，利用console来做一些验证操作。3. IE8的断点调试功能IE8自带的开发者工具，虽然极其难用，但也可以断点调试。断点调试的方法与上述雷同。使用IE8开发者工具进行断点调试可以看到，IE8似乎莫名其妙地终止了js代码的识别。这样的话，从74行往后，都没办法加断点了，真不可思议。但我们有时为了兼容IE，不得不在IE下进行一些调试，怎么办呢？可以用上一篇文章的办法，在需要中断的位置加入debugger语句，这样程序运行时，IE8就会中断在debugger语句上了。总结有时候我