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() 是一种更好的方式，原因如下：

alert() 会阻塞 JS 程序的执行，不单击 确定 按钮，后续代码无法继续执行；而 console.log() 仅在控制台中打印相关信息，不会阻塞 JS 程序的执行。 对于输出内容为对象时，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  所示的结果。、

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

23931.html

html