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 相关文章推荐
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 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
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
python检测服务器是否正常
2014/02/16 Python
python回调函数用法实例分析
2015/05/09 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Django框架模板介绍
2019/01/15 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
给分销商的致歉信
2014/01/14 职场文书
求职简历的自我评价
2014/01/31 职场文书
学生个人自我鉴定
2014/03/26 职场文书
婚前财产公证书
2014/04/10 职场文书
学习心得体会
2019/06/20 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js