首页 > JavaScript 阅读:1,030

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 程序的执行。

关注微信公众号「站长严长生」,在手机上阅读所有教程,随时随地都能学习。本公众号由C语言中文网站长运营,每日更新,坚持原创,敢说真话,凡事有态度。

魏雪原二维码
微信扫描二维码关注公众号