JavaScript代码调试方法实例小结

本文实例讲述了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错误与调试技巧总结》、《JavaScript传值操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我

  • 利用vscode调试编译后的js代码详解

    利用vscode调试编译后的js代码详解

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • 在vs2010中调试javascript代码方法

    在vs2010中调试javascript代码方法

    操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

  • 简单实用的js调试logger组件实现代码

    但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值.debugger使用起来其实也挺纠结的,只有ie支持.所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦. 于是,有了下面说的这个js组件.这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用lo

  • 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错. 本文分享自己昨晚写的一个console类来试图解决这一问题.当然,更好的做法是把测试代码分开写,那样就不会有这个问题. 解决思路 如何解决IE下不兼容的问题呢,那就是我们自己定义一个console类来覆盖浏览器

  • 为调试JavaScript添加输出窗口的代码

    为调试JavaScript添加输出窗口的代码

    虽然不是很复杂的实现,但每次都要这样就会很麻烦,所以我写了一小段脚本,用来自动生成这个输出窗口. 代码 复制代码 代码如下: window.Babu = {}; Babu.Debugging = {}; Babu.Debugging.writeLine = function(format, arg1, arg2) { var console = Babu.Debugging._getConsole(); if (console.get_visible()) { var msg = format;

  • js调试工具console.log()方法查看js代码的执行情况

    我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>

  • javascript代码调试之console.log 用法图文详解

    javascript代码调试之console.log 用法图文详解

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

  • JavaScript代码调试方法实例小结

    本文实例讲述了JavaScript代码调试方法.分享给大家供大家参考,具体如下: 1 把消息记录到控制台 IE8.Firefox.Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法: error(message):错误性消息. info(message):信息性消息. log(message):一般性消息. warn(message):警告性消息. Opera 10.5 之前的版本,是使用 opera.postError() 方

  • 了不起的11个JavaScript代码重构最佳实践小结

    模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分时间都在与函数打交道,所以我们希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了.如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构. 如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中.这是一种很常见的优化工作,这样做的好处主要有以下几点. 避免出现超大函数. 独立出

  • Python调用JavaScript代码的方法

    准备阶段: 以一段简单的JS脚本为例,将代码写入到文件中,其中,定义了一个方法,计算两个数的和. //norm.js //计算两个数的和 function add(num1, num2) {    return num1 + num2; } 方法一.PyExecJS PyExecJS 是使用最多的一种方式,底层实现方式是:在本地 JS 环境下运行 JS 代码支持的 JS 环境包含:Node.js.PyV8.PhantomJS.Nashorn 等 首先,我们需要安装依赖包 PyExecJS //p

  • JavaScript创建对象方法实例小结

    本文实例讲述了JavaScript创建对象方法.分享给大家供大家参考,具体如下: 最简单的方式就是创建一个Object对象,并为其添加属性和方法. //示例代码 var person=new Object() person.name="yumi" person.age=18 person.job="coder" person.sayName=function(){ alert(this.name) } person.sayName()//输出yumi 这种方式使用同

  • 优化 JavaScript 代码的方法小结

    优化 JavaScript 代码 作者: Gregory Baker, GMail 软件工程师 和 Erik Arvidsson, Google Chrome 软件工程师 需要的经验: JavaScript 相关工作知识 客户端脚本能让你的应用更加地动态和活跃, 但是浏览器对代码的解析可能造成效率问题, 而这种性能差异在客户端之间也不尽相同. 这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践. 使用字符串 字符串连接操作会对 Internet Explorer 6 和

  • JavaScript数组去重算法实例小结

    本文实例总结了JavaScript数组去重算法.分享给大家供大家参考,具体如下: 测试用例: arr = ["1",3,"1",1,4,5,1,"2",5,1,{"name":"li","age":20},2,4,3,{"name":"li","age":20},""]; 方法一:借助于临时数组与indexO

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • JS Math对象与Math方法实例小结

    JS Math对象与Math方法实例小结

    本文实例讲述了JS Math对象与Math方法.分享给大家供大家参考,具体如下: JavaScript 提供了 Math 内置对象方便我们进行数学运算 他具有数学常用和函数的属性和方法. 常用属性 //max() 与 min() 求一组数的最大值和最小值 Math.max(10,9,22); // => 22 Math.min(10,9,8,22); // => 8 常用属性 Math.PI // 圆周率 => 3.141592653589793 Math.E // 自然对数底,数学中的

  • JavaScript函数定义方法实例详解

    本文实例讲述了JavaScript函数定义方法.分享给大家供大家参考,具体如下: JavaScript 函数定义方法 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束

  • javascript 易错知识点实例小结

    本文实例总结了javascript 易错知识点.分享给大家供大家参考,具体如下: 为什么 typeof null === 'object' 原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为 object 类型, null 的二进制表示是全0,自然前三位也是0,所以执行 typeof 时会返回" object ". 对象属性的存在性 如 myObject.a 的属性访问返回值可能是 undefined ,但是这个值有可能是属性中存储的

随机推荐