JavaScript中的console.log()函数详细介绍_javascript技巧

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。

什么是console.log()?

除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。比如,以下代码将在控制台中打印”Sample log”:

复制代码 代码如下:

window.console.log("Sample log");

上述代码可以忽略window对象而直接简写为:

复制代码 代码如下:

console.log("Sample log");

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符\n以及制表符\t。

console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到,具体各个浏览器中的查看方法可以参见以下网页:
http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it

不同的浏览器中console.log()行为可能会有所不同,本文主要探讨Firebug中console.log()的使用。

兼容没有调试控制台的浏览器

对于缺少调试控制台的老版本浏览器,window中的console对象并不存在,因此直接使用console.log()语句可能会在浏览器内部造成错误(空指针错误),并最终导致某些老版本浏览器的崩溃。为了解决这一问题,可以人为定义console对象,并声明该console对象的log函数为空函数;这样,当console.log()语句执行时,这些老版本的浏览器将不会做任何事情:

复制代码 代码如下:

if(!window.console){
  window.console = {log : function(){}};
}

不过,在大多数情况下,没有必要去做这种兼容性工作 — console.log()等调试代码应当从最终的产品代码中删除掉。

使用参数

与alert()函数类似,console.log()也可以接受变量并将其与别的字符串进行拼接:

复制代码 代码如下:

//Use variable
var name = "Bob";
console.log("The name is: " + name);

与alert()函数不同的是,console.log()还可以接受变量作为参数传递到字符串中,其具体语法与C语言中的printf语法一致:

复制代码 代码如下:

//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);

上述代码的执行结果为:”Alex is 42 years old.”

使用其它日志级别

除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息:

复制代码 代码如下:

//Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");

从Firebug控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤:

时间: 2024-09-08 21:45:24

JavaScript中的console.log()函数详细介绍_javascript技巧的相关文章

JavaScript中的console.profile()函数详细介绍_javascript技巧

编写JavaScript程序时,如果需要知道某段代码的执行时间,可以使用console.time().不过,在分析逻辑较为复杂的JavaScript程序,试图从中找出性能瓶颈的时候,console.time()就不适用了 - 深入分析逻辑较为复杂的JavaScript程序的运行就意味着插入大量的console.time()语句,而这无疑是不可接受的.对于复杂逻辑的JavaScript程序调优,正确的方法是使用console.profile(). 浏览器支持 安装了Firebug插件的Firefo

JavaScript中的console.time()函数详细介绍_javascript技巧

如果需要在Web调试过程中知道代码执行的时间,那么可以通过在JavaScript代码中添加console.time()语句和console.timeEnd()语句来对程序的执行进行计时.以下面这个耗时较长的foo()函数为例: 复制代码 代码如下: function foo(){     var x = 4.237;     var y = 0;     for (var i=0; i<100000000; i++) {         y = y + x*x;     }     return

JavaScript中的console.group()函数详细介绍_javascript技巧

在使用console.log()或者其它日志级别的控制台输出功能时,日志输出是没有层级关系的.当程序中日志输出较多时,这一局限性将带来不小的麻烦.为了解决这一问题,可以使用console.group().以下面代码为例: 复制代码 代码如下: function doTask(){     doSubTaskA(1000);     doSubTaskA(100000);     console.log("Task Stage 1 is completed");     doSubTas

JavaScript中的立即执行函数表达式介绍_javascript技巧

我们习惯看到这样的匿名函数 复制代码 代码如下: (function(){     console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例

JS中捕获console.log()输出的方法_javascript技巧

本文实例讲述了JS中捕获console.log()输出的方法.分享给大家供大家参考.具体分析如下: 我们知道console.log()可以将信息输出到debugger中供开发者查看.但如果我们想要在JS中获取console.log()的输出结果呢?其实不难,先将原本的console.log保存起来,然后替换成另外一个实现即可.代码如下: var lastLog; console.oldLog = console.log; console.log = function(str) { console

javascript中call,apply,bind函数用法示例_javascript技巧

本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu

Javascript的严格模式strict mode详细介绍_javascript技巧

"严格模式"(strict mode)是ECMA-262 Edition 5定义的新语法,表示要用严格的Javascript语法来执行,有一些过去惯用的写法就会抛出SyntaxError异常,例如:1.变量前没有用var宣告2.使用八进制语法:var n = 023和var s = "\047"3.使用with语句4.使用delete删除一个变量名(而不是属性名):delete myVariable5.使用eval或arguments作为变量名或函数名6.使用未来保

JavaScript中5种调用函数的方法_javascript技巧

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

JavaScript中的null和undefined区别介绍_javascript技巧

JavaScript中存在2个代表信息不存在的特殊值:null和undefined.个人认为可以从以下角度来理解这两个特殊值之间的区别: 1.null代表有存储信息的容器(比如之前被赋过值的变量),但该容器中的内容为空. 2.undefined代表不存在用于存储信息的容器. JavaScript中的null与其它多数编程语言中的null没有什么区别,基本用于表示信息值为空:而在JavaScript中下述情况下表达式返回结果为undefined: 1.从未被赋过值的变量. 2.访问某个对象不存在的