JavaScript代码调试方法实例小结


Posted in Javascript onJanuary 05, 2019

本文实例讲述了JavaScript代码调试方法。分享给大家供大家参考,具体如下:

1 把消息记录到控制台

IE8、Firefox、Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法:

  • error(message):错误性消息。
  • info(message):信息性消息。
  • log(message):一般性消息。
  • warn(message):警告性消息。

Opera 10.5 之前的版本,是使用 opera.postError() 方法把消息写入控制台的。

可以使用下面的这个函数作为统一写入控制台的接口:

/**
 * 跨浏览器,向控制台写入消息
 * @param message
 */
function log(message) {
  if (typeof console == "object") {
    console.log(message);
  } else if (typeof opera == "object") {
    opera.postError(message);
  } else if (typeof java == "object" && typeof java.lang == "object") {
    java.lang.System.out.println(message);
  }
}

可以在浏览器中安全地使用这个函数:

function sum(num1, num2) {
  log("Entering sum(), arguments are " + num1 + "," + num2);
  log("Before calculation");
  var result = num1 + num2;
  log("After calculation");
  log("Exiting sum()");
  return result;
}

注意:在发布之前,务必移除所有的消息。这可以在部署之前,通过编写特定的代码步骤,实现自动清理。不要使用 alert(),因为弹出的警告框会阻止程序的执行;而且在测试异步操作对时间的影响时,使用警告框也会影响测试结果。

2 把消息记录到当前页面

可以在页面中开辟出一小块区域,用于显示消息:

function log(message) {
  var console = document.getElementById("debuginfo");
  if (console == null) {
    console = document.createElement("div");
    console.id = "debuginfo";
    console.style.background = "#dedede";
    console.style.border = "1px solid silver";
    console.style.padding = "5px";
    console.style.width = "400px";
    console.style.position = "absolute";
    console.style.right = "0px";
    console.style.top = "0px";
    document.body.appendChild(console);
  }
  console.innerHTML += "<p>" + message + "</p>";
}

这种技术在不支持 JavaScript 控制台的 IE7 以及早期版本中,特别有用。

注意:在发布之前,也要移除把错误消息输出到页面中的代码。

3 抛出错误

如果错误消息很具体,那么就可以直接把它当做确定错误来源的依据,比如下面的这个函数:

function divide(num1, num2){
  return num1/num2;
}

这个函数如果其中的一个参数不是数值,那么就会返回 NaN。所以可以在计算前先进行检测:

function divide(num1, num2){
  if(typeof num1 !="number" || typeof num2 !="number"){
    throw new Error("divide(): 两个参数都必须是数值")
  }
  return num1/num2;
}

这个错误消息包含了函数的名称以及导致错误的真正原因,所以如果抛出了这个错误,我们就能立即知道错误的来源以及问题的性质。

大型的应用程序,可以使用下面的这个 assert() 函数抛出自定义错误:

<script type="text/javascript">
  function assert(condition, message) {
    if (!condition) {
      throw new Error(message);
    }
  }
  function divide(num1, num2) {
    assert(typeof num1 == "number" && typeof num2 == "number", "divide():Both arguments must be numbers.");
    return num1 / num2;
  }
  divide(1,"tt");
</script>

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

Javascript 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
JavaScript实现连连看连线算法
Jan 05 #Javascript
JavaScript错误处理操作实例详解
Jan 04 #Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 #Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 #Javascript
Node.js操作系统OS模块用法分析
Jan 04 #Javascript
Node.js console控制台简单用法分析
Jan 04 #Javascript
Node.js JSON模块用法实例分析
Jan 04 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
mysql5详细安装教程
2007/01/15 PHP
PHP中常用的魔术方法
2017/04/28 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js获取Get值的方法
2016/09/29 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Vue.directive使用注意(小结)
2018/08/31 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
opencv实现图像几何变换
2021/03/24 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
优秀教师主要事迹
2014/02/01 职场文书
医院信息公开实施方案
2014/05/09 职场文书
煤矿安全生产标语
2014/06/06 职场文书
毕业设计论文评语
2014/12/31 职场文书
英语感谢信范文
2015/01/20 职场文书
春季运动会开幕词
2015/01/28 职场文书
计生个人工作总结
2015/02/28 职场文书
人身损害赔偿协议书
2016/03/22 职场文书