JavaScript 控制台输出方法详解:console.log 及常用 API
本文详细解析 JavaScript 中控制台输出的多种方法。重点介绍 console.log 的格式化字符串(%s, %d, %f, %o)及多参数拼接规则,并逐一说明 console.debug、info、warn、error、assert、dir、dirxml、trace、group 及 time 等 API 的功能与适用场景,帮助开发者高效进行前端调试。
console.log 基础用法与格式化输出
console.log(object[, object, ...])
该方法用于在浏览器控制台中打印一条消息。当传入多个参数时,控制台会将这些参数以空格分隔的形式依次输出。
第一个参数可以是包含格式化占位符的字符串,例如:
上述示例可以通过不使用格式化占位符的代码实现相同效果:
此外,这两种方式可以混合使用。若使用了格式化占位符,但提供的参数数量多于占位符数量,多余的参数将以空格分隔的方式追加在字符串末尾,例如:
当参数为 JavaScript 对象时,控制台输出的并非纯文本,而是一个可交互的超链接。点击该链接可查看对象的 HTML、CSS、Script 及 DOM 窗口信息。也可以使用格式化字符串 %o 来输出 JavaScript 对象。
支持的格式化字符串列表如下:
| 格式化字符串 | 类型 |
|---|---|
| %s | 字符串 |
| %d, %i | 整型(暂不支持数字型) |
| %f | 浮点型 (暂不支持数字型) |
| %o | 链接对象 |
其他常用控制台输出方法
console.debug(object[, object, ...])
在控制台输出一条消息,并附带指向代码调用位置的超链接。若直接在控制台输入该命令,则不会显示超链接(行为与 console.log() 一致)。
console.info(object[, object, ...])
在控制台输出一条带有“信息”图标的消息,并包含指向代码调用位置的超链接。
console.warn(object[, object, ...])
在控制台输出一条带有“警告”图标的消息,并包含指向代码调用位置的超链接。
console.error(object[, object, ...])
在控制台输出一条带有“错误”图标的消息,并包含指向代码调用位置的超链接。
断言、对象查看与性能计时
console.assert(expression[, object, ...])
用于测试表达式 expression 是否为真。如果表达式为假,控制台将输出一条消息并抛出异常。
console.dir(object)
以列表形式输出对象的所有属性,其显示效果类似于查看 DOM 窗口。
console.dirxml(node)
输出 HTML 或 XML 元素的源代码,显示效果与在 HTML 窗口中查看相似。
console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.
The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.
console.group(object[, object, ...])
输出一条消息,并开启一个嵌套块,块内内容会自动缩进。通过调用 console.groupEnd() 可关闭该块。此命令支持嵌套使用。
console.groupEnd()
关闭最近由 console.group 打开的块。
console.time(name)
创建一个名为 name 的计时器。调用 console.timeEnd(name) 可停止计时器并输出耗时(毫秒)。
console.timeEnd(nam)
以上关于 JavaScript 控制台输出方法的详解即为全部内容,希望能为开发者提供参考,感谢支持。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28







