console js刷新页面_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() 方法调试代码。

使用console.log()方法调试代码

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;

};

累加结果：

上述代码在 Chrome 浏览器中执行后，同时按Ctrl+Shift+I组合键(对 Mac 苹果电脑使用的是Command+Option+I组合键)，打开 Chrome 浏览器的“开发者工具”，默认将打开“Console”浏览器控制台，在控制台中查看各个 console.log() 的输出结果，可看到图1  所示的结果。、

图 1：console.log() 的输出结果

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