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 实现字符串反转的三种方法
Nov 23 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js查找节点的方法小结
Jan 13 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
前端vue如何使用高德地图
Nov 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无敌近乎加密方式!
2010/07/17 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP7新增函数
2021/03/09 PHP
JavaScript this 深入理解
2009/07/30 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python实现闹钟定时播放音乐功能
2018/01/25 Python
Form表单及django的form表单的补充
2019/07/25 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
保密协议书范本
2014/04/22 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
部队2015年终工作总结
2015/04/02 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Java spring单点登录系统
2021/09/04 Java/Android