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 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
vue实现多级菜单效果
Oct 19 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
python opencv 直方图反向投影的方法
2018/02/24 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
六查六看剖析材料
2014/02/15 职场文书
庆六一活动总结
2014/08/29 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
十岁生日答谢词
2015/01/05 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书