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程序设计有所帮助。

时间: 2019-01-04

在vs2010中调试javascript代码方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

关于vue.js中实现方法内某些代码延时执行

今天在工作时遇见了某些代码需要延时操作的情况.具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后,grid内数据能够及时更新以便显示增删改操作后的数据.这里的话使用的是vue.js中的setTimeout函数来解决该问题. 代码如下: var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这

node.js中的console.log方法使用说明

方法说明: 向标准输出流打印字符并以换行符结束. 语法: 复制代码 代码如下: console.log([data], [...]) 接收参数: console.log接受若干个参数,如果只有一个参数,则输出这个参数的字符串形式. 如果有多个参数,则以类似于C语言printf()命令的格式输出. 如果没有参数,只打印一个换行符. 例子: 复制代码 代码如下: var count = 1234; console.log('count: %d', count); //输出结果  count : 12

Node.js中console.log()输出彩色字体的方法示例

1. 代码样例 console.log('\033[42;30m DONE \033[40;32m Compiled successfully in 19987ms\033[0m') 2. 输出结果 3. 解释 不难发现样例中的关键的代码是类似 \033[42;30m 这种格式的,换成大白话的写法就是 \033[背景色编号;字色编号m . 字色编号:30黑,31红,32绿,33黄,34蓝,35紫,36深绿,37白色 背景编号:40黑,41红,42绿,43黄,44蓝,45紫,46深绿,47白色 发

js调试工具Console命令详解

一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te

JS 中使用Promise 实现红绿灯实例代码(demo)

要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个

node.js 一个简单的页面输出实现代码

安装过程就不说了.如果成功是能使用node的命令.node.js调试是非常方便的.每种后台语言都有一个向那个黑黢黢的控制台团输出语用的命令.node.js沿用FF那套东西,也就是console对象与其方法.我们首先建一个example.js文件,内容如下,然后在控制台打开它. 复制代码 代码如下: console.log("hello node.js") for(var i in console){ console.log(i+" "+console[i]) } n

深入浅析JS的数组遍历方法(推荐)

用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); }); 上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了._.each()方法遍历数组非常好用,但是它的内部实现一点都不难.下面就一起来看看到底是如何实现_

除Console.log()外更多的Javascript调试命令

Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console).不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性. Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义. 它被浏览器定义为 Window.Console,也可被简单的 Console 调用. 最常用的方法就是Console.log(),就是在控制台输出内容.刚开始学前端的时候看到大家都是用的Cons

JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>