JavaScript错误与调试方法详解

前端开发中,应该除非大型团队对编程有着严格的日志控制和错误机制,在小型团队中的前端使用错误与调试还是基本上靠Firebug等调试工具。前端迭代时间短周期也比较短,在这方面也的确是一个欠缺。

阅读了《编写可维护的JavaScript》书中的第十章 ”抛出自定义错误“ 对代码的书写和规范还是有一定的启发。把一些有用的东西作为笔记记下来。

错误类型:

•Error – 基本错误类型
•EvalError – 通过 eval() 函数执行代码发生的错误抛出
•RangeError – 数字超出其边界时抛出(例:创建一个负数索引的数组)
•ReferenceError – 期望的对象不存在
•SyntaxError – 给 eval() 函数传递的代码中有语法错误
•TypeError – 变量不是期望的类型(new 10,’prop’ in true)
•URLError – 常见于 encodeURI()、encodeURIComponent(),decodeURI() 等传递了非法格式的URI字符串时抛出。

关于 Try-Catch 的应用

•修复了一个难以调试和修复的BUG之后,尝试增加自定义错误,以便于下次调试时快速的定位错误代码。
•编写代码时的一些防御型、预见性的错误可以尝试添加错误处理函数。
•正在编写的代码需要提供给其他人使用,如果按照对方的思维,在特定的情况中抛出错误处理
错误以及错误处理不是为了防止错误,而是为了在错误发生时能够更加快速的调试和定位错误。

A  使用alert() 和document.write() 方法监视变量值

如果要中断代码的运行,监视变量的值,则使用alert() 方法;

如果需要查看的值很多,则使用document.write() 方法,避免反复单击“确定”按钮;
 

B  使用window.onerror 事件

当页面出现异常时,onerror 事件会在window 对象上触发。它能在一定程度上告诉开发者相关的错误信息。

示例:

 代码如下 复制代码

  <script type="text/javascript">
    function myerror(_message,_url,_line)
    {
       alert("错误信息:" + _message
            +"n错误的URI:" + _url
            +"n错误的行数:" + _line
       );
 
       return true; //屏蔽系统的事件
    }
    //绑定错误事件
    window.onerror = myerror;
 
    //触发错误示例:
    window,onload = test;
  </script>

注意:在IE 中,触发error 事件后,正常的代码会继续运行,所有的变量和数据都会保存下来,在其onerror 事件处理方法中可以正常访问到;而在Firefox 中,触发error 事件后,一切都结束,所有的变量和数据都将被销毁。

 

C  使用 try...catch 语句找错误

示例:

 代码如下 复制代码

  <script type="text/javascript"> 
    try 
    { 
        alert(触发异常); 
    } 
    catch (_ex) //可以省略“_ex”参数 
    { 
       var err = "错误信息"; 
       for (var i in _ex) 
       { 
          err += "n参数名:" + i 
               + "t参数值:" + _ex[i]; 
       } 
       alert(err); //打印错误 
    } 
    finally  //finally 可以被省略...
    {
       alert("finally 总是会运行");
    }
  </script>

注意:try...catch 并不能很好的处理JavaScript 的语法错误。

示例:

 代码如下 复制代码

  <script type="text/javascript">
    try
    {
        alert("触发语法错误")); //多了半边“)”
    }
    catch (_ex) //可以省略_ex参数
    {
       var err = "错误信息";
       for (var i in _ex)
       {
          err += "n参数名:" + i
               + "t参数值:" + _ex[i];
        }
       alert(err); //打印错误
    }
  </script>

该示例并没有进入catch 块中。

 

D  使用相关调试器

在IE 和Firefox 浏览器中,可以使用相关的调试器或插件对JavaScript 进行调试。

 

●  在Firefox 浏览器中,可以使用其自带的“错误控制台”。操作步骤如下:

      打开Firefox 浏览器 → 在菜单条“工具”中 → 选择“错误控制台”即可。

      在没有其他插件的情况下,其自带的“错误控制台”是一个非常不错的选择。

 

另外,在Firefox 浏览器中,还有一些很不错的调试器,如:Venkman、Firebug 等。

       Venkman 调试器安装后,可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“JavaScript  Debugger ”命令启用;

       Firebug 调试器安装后,可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“Firebug”→ 选择“打开 Firebug”即可;

 

●  在IE 浏览器中,可以使用 Microsoft  Script  Debugger 调试器

      Microsoft  Script  Debugger 是微软随IE 4 一同发布的一个IE插件,可以从微软的官方网站上免费下载。

      下载安装以后,必须将IE 浏览器的调试选项打开才能使用。操作步骤如下:

       1>   打开IE 浏览器 → 选择菜单栏的“工具”→ “Internet 选项”命令 → “高级”选项卡 → 将“禁用脚本调试(Internet Explorer )”复选框中的勾去掉即可。

       2>   当IE 浏览器正在浏览页面时,运行Microsoft  Script  Debugger 调试器工具即可进行调试。

时间: 2024-11-05 14:53:40

JavaScript错误与调试方法详解的相关文章

javascript瀑布流布局实现方法详解_javascript技巧

本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-

hadoop常见错误以及处理方法详解_php技巧

1.hadoop-root-datanode-master.log 中有如下错误:ERROR org.apache.hadoop.hdfs.server.datanode.DataNode: java.io.IOException: Incompatible namespaceIDs in导致datanode启动不了.原因:每次namenode format会重新创建一个namenodeId,而dfs.data.dir参数配置的目录中包含的是上次format创建的id,和dfs.name.dir

javascript表单事件处理方法详解_javascript技巧

本文实例为大家分享了javascript处理表单事件的常用方法,供大家参考,具体内容如下 1.访问表单对象的常用方法: ①:根据<form>元素的id属性: var myform=document.getElementById("myformid");  //myformid是某个<form>元素的ID: ②:根据<form>元素的name属性: var myform=document.forms["myformname"]; /

JavaScript数组操作函数方法详解

1.concat() 连接两个或更多的数组 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 例如: 1 <script type="text/javascript"> 2 var arr = [1, 2, 3]; 3 var arr1 = [11, 22, 33]; 4 document.write(arr.concat(4, 5, arr1)); 5 </script> 输出结果: 1,2,3,4,5,11,22,33 2.join() 把数组的

setcookie中Cannot modify header information-headers already sent by错误的解决方法详解_php技巧

复制代码 代码如下: <?php   setcookie("username","bu",time()+3600);   echo "aaaaa";?> 运行有警告Warning: Cannot modify header information - headers already sent by  下面是别人建议 方法一:在PHP里Cookie的使用是有一些限制的.1.使用setcookie必须在<html>标签之前2.

javascript中数组sort方法详解

在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子:  代码如下 复制代码 var arr1 = [6, 3, 4, 1, 2, 5, 7, 3, 0, 9, 8, 10];//这里有一个数字数组 arr1.sort(function(a,b){ return a-b; }); 这种方法是升序的排法,反之, arr1.sort(function(a,b){ return b-a; }); 这样就是降序的排法.

JavaScript中break continue方法详解

break 语句用于跳出循环. continue 用于跳过循环中的一个迭代. Break 语句 我们已经在本教程稍早的章节中见到过 break 语句.它用于跳出 switch() 语句. break 语句可用于跳出循环. break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话): for (i=0;i<10;i++)  {     if (i==3)     {         break;      }    x=x + "The number is " + i +

JavaScript获取服务器时间的方法详解_javascript技巧

本文实例讲述了JavaScript获取服务器时间的方法.分享给大家供大家参考,具体如下: Javascript是运行在客户端的脚本,我们一般都用new Date()来获取当前时间,但是得到的是客户端的时间,客户端时间是随意更改的,如果要做一个产品发布倒计时的话,客户端时间一改,就要闹笑话了.业务中需要用到服务器时间的场景还有很多,那么仅仅通过js怎么拿到服务器时间呢?事实上,只需要一个ajax请求就搞定,通过读取XMLHttpRequest对象的响应头里面的时间戳得到当前服务器时间! 原理就是这

JavaScript原生对象之Number对象的属性和方法详解

 这篇文章主要介绍了JavaScript原生对象之Number对象的属性和方法详解,本文讲解了创建 Number 对象的语法.MAX_VALUE.MIN_VALUE.NaN等属性或方法,需要的朋友可以参考下     创建 Number 对象的语法: 代码如下: var myNum = new Number(value); var myNum = Number(value); 当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象.如果不用 new