如何在网页中调试JavaScript

原创 2004年05月23日 16:13:00
如何在网页中调试JavaScript

译者:ego
日期:2004-5-23
说明:译文中提到了一些调试工具,都给出了下载链接,csdn上链接效果不显著,需要鼠标放上去才可见
 
有许多方式可以调试 JavaScript。我们首先从代码本身讨论一下:
  • 插入 alert 进入代码是最常见的方式,可以提示变量的值、类型,函数参数,对象属性。如果你用分支代码以支持分别做不同的事,你可以使用 confirm 来强制执行指定的分支功能。如果你想能够剪切粘贴结果可使用 prompt
  • 要想得到更详细的错误报告你可以使用 window.onerrortry..catch 语句。这会让代码直接运行,不会因某个错误而终止挂起,从而在代码执行完成后报告出所有的错误。
  • 有些错误在我们不知不觉中进入我们的代码,并且难于发现。我们要严格遵守代码约定,如用分号显式地结束语句而不是用分号插入;总是使用花括号把控制结构括起来如 if, if..else, switch, while, do..while, for, for..in 语句; 使用圆括号来表示优先而不是靠运算符本身的优先等组;使用统一的详细的命名规则;使用统一的代码缩进规则让源码更易读;使用显式的类型声明避免自动类型或者采别的方式达到同样效果;对于不同的浏览器有些简便的方式(特别是 ie),尽量使用符合标准语法的代码……。通过以上方式减少这些难以发现的错误产生。
  • 可以通过 js lint来运行代码,它可以检测某些潜在的错误。
以上是我们通过代码本身做的事。下面我们看看在浏览器中代码的检测
  • 使用多个不同类型的浏览器测试你开发的角本。在windows环境中,至少要用到 ie6w、op7以及moz。在mac机中,要至少用到 saf、op7、ie5m和moz。如果存在代码在一个或多个浏览器中不起作用,要看看换些不同的代码能否解决。如果还不行,就要根据不同浏览器做一个分支执行代码。
  • 在 ie中一定要启用错误报告。如果使用的是 windows,可以利用 Microsoft Script Debugger。如果需跟踪一个错误,你可以利用角本中的 debugger 关键字控制角本在调试模式下执行。推荐主要使用 ie 测试,用 op7 或 moz 来调试。
  • 在 Op7 当中,一定要启用 在JavaScript Console 中 JavaScript 错误报告。Op7 的 JavaScript Console 远比 ie 错误报告要好些,拥有更好的代码跟踪功能,更容易看到函数调用来源。并且可以报告出正确的错误行,不同于 iew 。
  • 在 moz 中有很多工具。可利用 Mozilla JavaScript Console,它可以报告错误和警告,并且允许做简单的角本赋值。可以启用严厉警告提示出许多潜在错误位置。可以使用 DOM Inspector 显示 document 树,stylesheets 树,computed styles,JavaScript 对象。可以用 Venkman (Mozilla JavaScript Debugger)获取更高级的 JavaScript 调试工具。可供使用的有 Ian Hickson's JavaScript Evaluation Sidebar 或者 Jesse Ruderman's JavaScript Environmentview scripts bookmarklet、JavaScript Shell 或者 view variables bookmarklet 或者 ViewScripts bookmarklet 。
  • 在 konq 当中,靠自己的力量要更多些,使用一些源代码的技巧。
  • 在 saf 中需要启用隐藏调试菜单(Hiden debug menu),不用在系统控制台显示毫无意义的错误信息,使用 Show DOM Tree 功能会更有用。如果你启用了显示调试菜单,Safari不运行,在终端使用下面的命令:
    代码:
    defaults write com.apple.Safari IncludeDebugMenu 1

在页面中直接嵌入JavaScript代码

一 标记 在HTML文档中通过使用标记将JavaScript脚本嵌入到其中,在HTML文档中可以使用多个标记,每个标记中可以包含多个JavaScript的代码集合。 script标记属性说明 ...
  • chengqiuming
  • chengqiuming
  • 2017年04月12日 10:30
  • 458

如何设置本地服务器来调试移动端的页面

关于本地服务器其实有很多种,有xampp,appserv,tomcat,nginx等。目前我主要是用nginx.所以今天要讲的也是这个啦。 首先要下载下来,现在以我已经下载好的为例,下载地址如下 ...
  • xbdabb
  • xbdabb
  • 2016年08月18日 15:22
  • 733

最全面的JavaScript调试技巧总结

最全面的JavaScript调试技巧总结
  • qq_26676207
  • qq_26676207
  • 2016年11月17日 11:27
  • 2148

Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...
  • zwk626542417
  • zwk626542417
  • 2014年12月29日 21:18
  • 25273

五个你必须知道的javascript和web 调试技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试 Weinre 在...
  • bamboolsu
  • bamboolsu
  • 2015年11月17日 23:42
  • 730

如何在多个设备上调试网页

试想一下,如果在调试网页的时候,修改了兼容性代码,想要测试其在各设备上的效果,多个设备,刷新,查看,刷新,查看。。。这无异于是在浪费你的时间,那么,该怎么解决这个问题,下面就推荐一款工具。省时的浏览器...
  • u012396955
  • u012396955
  • 2017年03月08日 13:56
  • 454

JavaScript单步调试

JavaScript单步调试,使用WebStorm对Js进行单步调试,使用Google Chrome对Js进行单步调试,使用Mozilla FireFox对Js进行单步调试...
  • woshiyoutiao
  • woshiyoutiao
  • 2016年03月28日 20:40
  • 1618

VS2010如何调试IIS上的网站

通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的。但有时候,VS自带的服务器弱爆了,无法满足一些特定情况的要求,我们必须把网站放...
  • crazyliyang
  • crazyliyang
  • 2016年08月29日 21:43
  • 1155

在线调试 微信打开的HTML5页面

需求 现在微信内嵌了自己的 X5 浏览器内核,该内核毕竟与别的主流浏览器还是有一点差别,如何线上调试成了一个棘手的问题。 开发时我们还可以使用 alert,线上错误就没办法了,再说总alert也...
  • fuguotao1
  • fuguotao1
  • 2015年07月02日 18:12
  • 16932

如何在sublime内调试Javascript代码

转载地址如下:sublime内调试Javascript代码 调试js代码经常是在浏览器中完成的, 如果编辑器也能完成部分的调试工作, 那我相信前端和node的世界将美好很多. OK, 先上图: ...
  • lyn167
  • lyn167
  • 2016年07月16日 13:35
  • 2557
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何在网页中调试JavaScript
举报原因:
原因补充:

(最多只允许输入30个字)