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


Posted in Javascript onApril 13, 2020

本文实例讲述了JS错误处理与调试操作。分享给大家供大家参考,具体如下:

JavaScript 错误 - throw、try 和 catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

try { 
  ... //异常的抛出 
} catch(e) {
   ... //异常的捕获与处理 
} finally { 
  ... //结束处理 }

例:

var txt=""; 
function message() 
{ 
  try { 
    adddlert("Welcome guest!"); 
  } catch(err) { 
    txt="本页有一个错误。\n\n"; 
    txt+="错误描述:" + err.message + "\n\n"; 
    txt+="点击确定继续。\n\n"; 
    alert(txt); 
  } 
}

finally 语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

<input id="demo" type="text">
<button type="button" οnclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
 var message, x;
 message = document.getElementById("p01");
 message.innerHTML = "";
 x = document.getElementById("demo").value;
 try { 
  if(x == "") throw "值是空的";
  if(isNaN(x)) throw "值不是一个数字";
  x = Number(x);
  if(x > 10) throw "太大";
  if(x < 5) throw "太小";
 }
 catch(err) {
  message.innerHTML = "错误: " + err + ".";
 }
 finally {
  document.getElementById("demo").value = "";
 }
}
</script>

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是:创建或抛出异常(exception)。

如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

function myFunction() {
  var message, x;
  message = document.getElementById("message");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值为空";
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x < 5)  throw "太小";
    if(x > 10)  throw "太大";
  }
  catch(err) {
    message.innerHTML = "错误: " + err;
  }
}

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难,但幸运的是,很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。

console.log() 方法

如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值:

实例

a = 5;
b = 6;
c = a + b;
console.log(c);

设置断点

在调试窗口中,你可以设置 JavaScript 代码的断点。

在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。

在检查完毕后,可以重新执行代码(如播放按钮)。

debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用,debugger 语句将无法工作。

开启 debugger ,代码在第三行前停止执行。

实例

var x = 15 * 5; 
debugger; 
document.getElementbyId("demo").innerHTML = x;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Javascript自定义事件详解
Jan 13 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
JS正则表达式常见函数与用法小结
Apr 13 #Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 #Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 #Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
You might like
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python 项目转化为so文件实例
2019/12/23 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
钱学森电影观后感
2015/06/04 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis