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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JS中图片压缩的方法小结
Nov 14 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
python表格存取的方法
2018/03/07 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
自我鉴定三原则
2014/01/13 职场文书
临床护士自荐信
2014/01/31 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
货款欠条范本
2015/07/03 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Java实现房屋出租系统详解
2021/10/05 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL