JavaScript console.log() 函数详解：用法、兼容性与日志级别

作者：异步漫步时间：2026-10-28 18:47:43浏览：472

本文详细介绍JavaScript中console.log()函数的使用方法。相比alert()，它不会阻断程序执行。文章涵盖基础调用、参数格式化（如%s和%d）、针对老版本浏览器的兼容性处理方案，以及Firebug支持的多级日志输出（debug、info、warn、error）与过滤功能。

console.log() 与 alert() 的区别

在JavaScript程序调试过程中，使用console.log()比alert()更为推荐。这是因为alert()会阻塞JavaScript代码的执行，从而引发副作用；而console.log()仅将信息输出到控制台，避免了此类干扰。

console.log() 基本概念

什么是console.log()？

当前大多数现代浏览器都内置了调试功能，即便没有，也可通过安装插件（如老版本Firefox的Firebug）来补充。在支持调试的浏览器中，window对象下会注册一个名为console的成员变量，指向调试工具的控制台。调用该对象的log()函数即可在控制台打印信息。例如，以下代码会在控制台输出“Sample log”：

代码如下:

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

上述代码可以省略window对象，直接简写为：

代码如下:

console.log("Sample log");

console.log()能够接收字符串、数字及JavaScript对象。与alert()类似，它也支持换行符\n和制表符\t。

console.log()输出的调试信息可在浏览器调试控制台中查看，具体各浏览器的查看方法可参考以下链接： http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it

不同浏览器中console.log()的行为可能存在差异，本文主要基于Firebug中的使用情况进行探讨。

老版本浏览器兼容性处理

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

对于缺少调试控制台的老版本浏览器，window对象中不存在console对象，直接调用console.log()可能导致错误（如空指针错误），甚至引发老版本浏览器崩溃。为解决此问题，可手动定义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控制台中可以看到，不同日志级别的打印信息，其颜色和图标是不一样的；同时，可以在控制台中选择不同的日志级别来对这些信息进行过滤：

console.log() 与 alert() 的区别