zoukankan      html  css  js  c++  java
  • JS 错误处理与调试

          在程序开发中难免会遇到一些错误,在成千上万的代码中去寻找错误非常明显相当于大海捞针。为此,每种计算机编程语言都要它独特的一套错误处理与调试机制。当然,JavaScript也不例外。

           


    错误发生:


    运行代码时发生的错误有非常多。每种错误都有相应的错误类型。ECMA-262定义了7种错误类型:

    1.Error 错误

    2.EvalError 全局错误

    3.RangeError 引用错误

    4.ReferenceError 參数错误

    5.SyntaxError 语法错误

    6.TypeError 类型错误

    7.URIError  编码错误


    当中Error是基类型。其它类型继承自它。Error类型非常少见。一般由浏览器抛出。

    EvalError类型表示全局函数eval()的使用方式与定义不同一时候抛出。但实际上并不能产生这个错误,所以实际上碰到的可能性不大。在使用encodeURI()和decodeURI()时。假设URI格式不对时,会导致URIError错误。但由于URI的兼容性非常强,导致这样的错误差点儿见不到。


    处理错误:


    浏览器自身具有报错的功能。以IE为例,出错时会弹出错误调试框。但这须要开启脚本调试,设置方法为:工具->Internet Options选项->高级->禁用脚本调试。取消勾选就可以。其他浏览器大同小异。

    良好的错误处理机制能够及时提醒用户,知道发生了什么,而不会惊慌失措,为此,作为开发者,必须理解在处理JavaScript错误的时候,都有哪些手段和工具能够利用。


    try-catch语句。

    样例:

    try {                                           //尝试着运行 try 包括的代码
         window.abcdefg();                          //不存在的方法
    } catch (e) {                                   //假设有错误。运行 catch,e 是异常对象
         alert('错误发生啦,错误信息为:' + e);    //直接打印调用 toString()方法
    }


    能够通过改动代码解决或浏览器兼容错误。不建议使用try-catch,由于它比一般语句消耗资源很多其它,负担更大。所以在万不得已,无法改动代码,不能通过普通推断的情况下才去使用try-catch。


    finally子句

    样例:

    try {
         window.abcdefg();
    } catch (e) {
         alert('错误发生啦,错误信息为:' + e.stack);
    } finally {                                            //总是会被运行
         alert('我都会运行!');
    }


    finally的作用通常是为了防止出现异常后。无法往下再运行的备用。

    抛出错误

    使用catch来处理错误信息。假设处理不了,我们就把它抛出丢掉。

    样例:

    try {
         new 10;
    } catch (e) {
         if (e instanceof TypeError) {
            throw new TypeError('实例化的类型导致错误!

    '); //直接中文解释错误信息 } else { <span style="white-space:pre"> </span>throw new Error('抛出未知错误!

    '); } }


    调试错误:


    在JavaScript初期,浏览器并没有针对JavaScript提供调试工具,所以开发者就想出了一套自己的调试方法,比方alert()。但使用alert()来调试错误比較麻烦,须要反复剪切和粘贴,假设遗忘掉没有删掉用于调试的alert()将特别头疼,如今我们有更好的调试方法。


    将消息记录到控制台

    样例:

    1、

    console.error('错误!

    '); //红色带叉 console.info('信息。'); //白色带信息号 console.log('日志!'); //白色 console.warn('警告。'); //黄色带感叹号

    2、

    var num1 = 1;
    console.log(typeof num1);    //得到 num1 的类型
    var num2 = 'b';
    console.log(typeof num2);   //得到 num2 的类型
    var result = num1 + num2;
    alert(result);              //结果是 1b,匪夷所思


    与alert()的比較:由于alert()会阻断后面代码的运行,看过之后还要删,删完预计一会儿又忘了。假设用了congsole.log的话,全部要调试的变量一目了然,也不须要删除,放着也没事。


    抛出错误


    上面已有抛出错误的样例和解说,这里不在赘述。


    调试工具


    浏览器都自带了自己的调试工具。而开发者仅仅习惯了Firefox一种。所以非常多情况下。在Firefox开发调试,然后去其它浏览器做兼容。

    事实上Firebug工具提供了一种Web版的调试工具:Firebug lite。


    调试步骤

    1、设置断点

    2、单步调试:五个button

          又一次执行:又一次单步调试

          断继:正常运行代码 

         单步进入:一步一步运行流程

         单步跳过:跳到下一个函数块

         单步退出:跳出运行到内部的函数

    3、监控

    4、控制台


    小结:

            错误处理与调试在之前VB,C++,C#,VB.NET中都有一定的学习和了解。

    但知识点却非常分散。

    在JavaScript中对其有了一个宏观和细节上全面的把控,对其有了更深的印象。

    知识是要一遍遍学习的。从陌生到熟悉再到精通,是一个循序渐进的过程。错误处理与调试机制学习了这么久,再往后就能够灵活地将它应用于各个项目和系统。









                

  • 相关阅读:
    vue2-highcharts 动态加载数据
    css选择器易混符号(~波浪号、+加号、>大于号)
    前端压缩字体文件---成功
    数组里添加一行数据(splice)
    new Date(date).getTime()不兼容iphone
    关于表单验证的正则表达式
    vuejs+webpack环境搭建
    Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
    $.get、$.post、$getJSON、$ajax的用法跟区别
    流式布局- 流式图片
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/6802960.html
Copyright © 2011-2022 走看看