JavaScript 错误处理与调试经验总结

下面总结一下JS错误处理与调试的方法
方法1：用alert() 和document.write()方法监视变量值。
alert()在弹出对话框显示变量值的同时，会停止代码的继续运行，直到用户单击“确定”按钮，而document.write()则在输出值后继续运行代码。调试JS时可以根据具体情况来选择这种方法。
例如下面代码：将数组a中以1开头的数据添加到数组b中


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
var a=["123","456","789","111"];
function AlertMessage()
{
var b=new Array("1111");
for(var i=0;i<a.length;i++)
{
if(a[i].indexOf("1")!=0)
{
alert(a[i]);
b.push(a[i]);
}
}
}
</script>
</head>
<body >
<input type="button" value="点我" onclick="AlertMessage()"/>
</body>
</html>

如果加入的值比较多，则可以使用document.writer()方法，避免反复点击确定按钮。
方法2：用onerror事件找到错误：
当页面出现异常时，error事件会在window对象上触发，它能够在一定程序上告诉开发者出现了错误，并帮助开发者找到错误所在，如下例：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
window.onerror=function()
{
alert("不好意思，出错了!");
}
</script>
</head>
<body onload="NonExist()" >
</body>
</html>

代码运行body标记的onload事件时调用了一个不存在的函数NonExist(),产生了错误，如下图：


同时，浏览器本身的代码调试错误也出现了： 

要避免浏览器自己的错误提示很简单，只需要要onerror事件的处理函数最后返回ture便可，代码如下：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
window.onerror=function()
{
alert("不好意思，出错了!");
return true;//屏蔽系统事件
}
</script>
</head>
<body onload="NonExist()" >
</body>
</html>

但这样处理对于解决错误并没有任何的帮助。其实onerror还提供了3个参数来确定错误的性质，代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
window.onerror=function(message,url,line)
{
alert("不好意思，出错了:\n错误提示："+message+"\nUrl："+url+"\n行号："+line);
return true;//屏蔽系统事件
}
</script>
</head>
<body onload="NonExist()" >
</body>
</html>

在IE运行时的提示：


在Firefox运行的提示
 
在IE浏览器中发生error事件时，正常的代码会继续执行，所有的变量和数据都保存下来，并可以通过onerror事件处理函数访问。而在Firefox中，正常的代码执行都会结束，同时所有的错误发生之前的变量和数据都会被销毁.
方法3：用try….catch语句找到错误


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
try
{
alert("这个是try...catch的例子");
alert(hello);
}
catch(exception)
{
var error="";
for(var i in exception)
{
error+=i+"："+exception[i]+"\n";
}
alert(error);
}
</script>
</head>
<body>
</body>
</html>

IE运行时的提示：
 
Firefox运行时的提示：
 
通过try…..catch可以很轻松的找到错误的问题，不过可惜的是该语句并不能很好地处理语句错误。如下例：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
try
{
alert("这个是try...catch的例子"));
}
catch(exception)
{
var error="";
for(var i in exception)
{
error+=i+"："+exception[i]+"\n";
}
alert(error);
}
</script>
</head>
<body>
</body>
</html>

try语句里面出现了括号不匹配的错误，而整个代码并没有运行catch中的模块，而是浏览器弹出了错误提示框，如下图：

方法4：使用Firefox错误控制台调试：

在Firefox菜单栏中选择“工具”－>“错误控制台”,便可以打开它，所有浏览中运行的错误，警告，消息都会传错误控制台，如下：

Firefox提示的错误信息要比IE全面而且准确的多。

方法5：使用Firefox插件FireBug

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。具体如何安装使用FireBug可参考这篇文章：http://apps.hi.baidu.com/share/detail/15314208

方法6：使用Miscrosoft Script Debugger调试：

在IE菜单栏中打开“工具”－>“Internet选项“，选择”高级“，将”禁用脚本调试“复选框的勾去掉。

具体如何使用就不介绍了。

方法7：使用IE下的JS调试工具companion.js

一款像firefox中的firedebug工具类似的一个工具包，它的特点就是可以有好的提示错误，并且可以在IE浏览器下方出现控制台输出.方便及时调试。

具体可参考这篇文章：http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

还有其他JS调试工具就不一一介绍了，大家也可以介绍多几种比较好的JS错误处理方法或JS调试工具。

赞 (0)

相关推荐

  • JS 调试中常见的报错问题解决方法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Function.m.parseJSON (jquery.js:8515) at Object.success (crud.html:45) at j (jquery.js:3143) at Object.fireWith [as resolveWith] (jquery.js:3255) at x (

  • 可以用来调试JavaScript错误的解决方案

    A 使用alert() 和document.write() 方法监视变量值 如果要中断代码的运行,监视变量的值,则使用alert() 方法: 如果需要查看的值很多,则使用document.write() 方法,避免反复单击"确定"按钮: B 使用window.onerror 事件 当页面出现异常时,onerror 事件会在window 对象上触发.它能在一定程度上告诉开发者相关的错误信息. 示例: 复制代码 代码如下: <script type="text/javasc

  • JS中的异常处理方法分享

    js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

  • JavaScript 错误处理与调试经验总结

    JavaScript 错误处理与调试经验总结

    下面总结一下JS错误处理与调试的方法 方法1:用alert() 和document.write()方法监视变量值. alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击"确定"按钮,而document.write()则在输出值后继续运行代码.调试JS时可以根据具体情况来选择这种方法. 例如下面代码:将数组a中以1开头的数据添加到数组b中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • JavaScript高级程序设计 错误处理与调试学习笔记

    第十四章 错误处理与调试 1.开启浏览器错误报告 1.1 Internet Explorer □Toos → Internet Option → Anvanced → Display a notification about every script error 1.2 Firefox □Tools → Error Console (Firebug) 1.3 Safari □Edit → Preferences → Advanced → Show develop menu in menubar/

  • JavaScript错误处理操作实例详解

    本文实例讲述了JavaScript错误处理操作.分享给大家供大家参考,具体如下: 良好的错误处理机制可以让用户得到及时的提醒,所以让我们来看看 JavaScript 提供了哪些针对错误处理的工具和方法吧O(∩_∩)O~ 1 try-catch 语句 ECMA-262 第 3 版引入了 try-catch 语句,这时 JavaScript 处理异常的标准方式: try{ //可能会导致错误的代码 } catch (error){ //错误处理 } 如果 try 块中的代码发生了错误,会立即执行 c

  • JS错误处理与调试操作实例分析

    本文实例讲述了JS错误处理与调试操作.分享给大家供大家参考,具体如下: JavaScript 错误 - throw.try 和 catch try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行. JavaScript try 和 catch try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代

  • 简介JavaScript错误处理机制

    1. try-catch语句 ECMA-262第3版引入了try-catch语句,作为JavaScript中处理异常的一种标准方式. 语法: try{ // 可能会导致错误的代码 }catch (error){ // 在错误发生时怎么处理 } 也就是说,我们应该把所有可能会抛出错误的代码都放在try语句块中,而把那些用于错误处理代码放在catch块中. try-catch语句的逻辑是:如果try块中的任何代码发生了错误,就会立即退出代码执行过程,然后接着执行catch块.此时,catch块会接收

  • 详解JavaScript错误捕获

    详解JavaScript错误捕获

    目录 一.基本使用与逻辑 二.特性 三.错误对象 四.较好的catch和throw策略 五.Promise的错误处理 六.性能损耗​ 一.基本使用与逻辑 使用 try{ //code.... }catch(err){ //error handling }finally{ //no matter what happens in the try/catch (error or no error), this code in the finally statement should run. } 逻辑

  • JavaScript必备的断点调试技巧总结（推荐）

    JavaScript必备的断点调试技巧总结（推荐）

    目录 为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点 总结 为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.

  • Dreamweaver 在onLoad运行***,发生了一个JavaScript错误

    错误提示类似: '在onChange运行Flash Button.htm时,发生了一个javascript错误'  在onLoad运行Design Notes_onOpen.htm时,发生了一个JavaScript错误. ＂在applyServerbahvior运行 InsertRecord.htm时发生了一个Javascript错误＂ 删除C:\Documents and Settings\Administrator\Application Data\Macromedia\Dreamweave

  • 10 种最常见的 Javascript 错误(频率最高)

    为了回馈我们的开发者社区,我们查看了数千个项目的数据库,发现了 JavaScript 中频度最高的 10 种错误.我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生.如果你能够避免落入这些 "陷阱",你将会成为一个更好的开发者. 数据才是王道,我们收集并分析了出现频次排前 10 的 JavaScript 错误. Rollbar 会收集每个项目的所有错误,并总结每个错误发生的次数.我们通过根据 "指纹"(rollbar 用到的一种算法,详见:https://

  • JavaScript错误处理try..catch...finally+涵盖throw+TypeError+RangeError

    目录 1.用途 2.语法 3.实操 1.用途 通常,如果发生错误,脚本就会立即停止,并在控制台将错误打印出来. 有了这个语句就可以捕获错误并执行合理操作,可以让程序继续执行下去 2.语法 try { // 代码... } catch (err) { //err是有关错误详细信息的对象 // 错误捕获,上面代码报错就会转到这个代码块,而不会停止运行 } finally { //无论是否有异常抛出或捕获它总是执行 } 这种语句可以嵌套 3.实操 Catch 捕获所有 error. 如果我们不知道如何

随机推荐