首页 > 编程笔记 > JavaScript笔记

JS console.log()方法调试代码

在 JS 中，除了使用 alert() 调试代码外，我们还常常使用 console 对象的 log() 对 JS 程序进行调试，console.log() 方法的作用是在浏览器的控制台中输出指定的参数值。

需要注意的是，在一些较低版本的浏览器，比如 IE6 以及没装“Firebug”插件的较低版本的 Firefox 等浏览器中是不能使用 console.log() 的。现在 IE11 以及较新版本的 Firefox 和 Chrome 不用安装任何插件，都具备调试功能，对这些浏览器，window 对象会自动注册一个名为 console 的成员变量，指代调试工具中的控制台。

console.log() 的使用语法如下：

console.log(msg);

log() 方法的参数 msg 和 alert() 的参数用法一样，也可以是任意值；但当参数为非空对象时，不同于 alert() 输出的是 [object object] 格式的内容，log() 的输出内容包含对象的结构内容。

就调试作用来说，alert() 和 console.log() 方法类似，但相比于 alert()，使用 console.log() 是一种更好的方式，原因如下：
  1. alert() 会阻塞 JS 程序的执行，不单击“确定”按钮，后续代码无法继续执行；而 console.log() 仅在控制台中打印相关信息，不会阻塞 JS 程序的执行。
  2. 对于输出内容为对象时，console.log() 输出的对象能看到对象结构；而 alert() 则是以 [object object] 格式输出对象，无法看到对象结构。

【例 1】使用 console.log() 方法调试代码。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用console.log()方法调试代码</title>
<script>
     window.onload = function (){
        var sum = 0,i = 1;
        var oText = document.getElementById('val');
        while(sum < 20){
           sum += i;
           console.log("sum=" + sum); //跟踪sum变量的值
           console.log("i=" + i); //跟踪变量i的值
           i++;    
        }
        oText.value = sum;
     };
</script>
</head>
<body>
累加结果：<input id="val" type="text"/>
</body>
</html>
上述代码在 Chrome 浏览器中执行后，同时按Ctrl+Shift+I组合键（对 Mac 苹果电脑使用的是Command+Option+I组合键），打开 Chrome 浏览器的“开发者工具”，默认将打开“Console”浏览器控制台，在控制台中查看各个 console.log() 的输出结果，可看到图1  所示的结果。、
console.log()的输出结果
图 1：console.log() 的输出结果

刷新图 1 所示页面，可看到几乎在控制台显示结果的同时，也显示了表单输入框，可见 console.log() 不会阻塞 JS 程序的执行。

所有教程

优秀文章