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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python集合类型用法分析
2015/04/08 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
优秀员工自荐书范文
2013/12/08 职场文书
初中生自我评价
2014/02/01 职场文书
党校学习心得体会范文
2014/09/09 职场文书
介绍信模板
2015/01/31 职场文书
2015年人事科工作总结
2015/04/28 职场文书