最核心的打印命令:console.log()
这是最基本、最常用的命令,用于在浏览器的开发者工具控制台中输出信息。

语法:
console.log(message); console.log(message1, message2, /* ... , */ messageN);
示例:
// 打印字符串
console.log("Hello, World!");
// 打印数字
console.log(2025);
// 打印变量
let name = "Alice";
let age = 30;
console.log(name); // 输出: Alice
console.log(age); // 输出: 30
// 打印多个变量
console.log("Name:", name, "Age:", age); // 输出: Name: Alice Age: 30
// 打印一个复杂的表达式
console.log("Next year, " + name + " will be " + (age + 1) + " years old.");
// 输出: Next year, Alice will be 31 years old.
如何打开开发者工具?
- Chrome / Edge / Firefox: 按
F12键,或者右键点击页面选择“检查”(Inspect),然后切换到 "Console" (控制台) 标签页。
其他常用的 console 方法
除了 log,console 对象还提供了其他非常有用的方法,可以帮助你更好地调试。

console.warn()
打印警告信息,输出通常是黄色的,可以用来提醒开发者注意某些潜在问题,但不会阻止程序运行。
let config = { theme: 'dark' };
if (config.theme === 'dark') {
console.warn("警告:深色主题可能在某些旧版浏览器上不支持。");
}
console.error()
打印错误信息,输出通常是红色的,并且会带上一个错误堆栈跟踪,这对于定位 Bug 至关重要。
function divide(a, b) {
if (b === 0) {
console.error("错误:除数不能为零!");
return;
}
return a / b;
}
divide(10, 0);
// 控制台会显示红色的错误信息和调用堆栈
console.info() / console.debug()
console.info(): 打印一般性信息,通常显示为带一个 "i" 图标的蓝色信息,有时在 "Verbose" (详细) 级别的日志中才能看到。console.debug(): 打印调试信息,默认情况下可能不会显示,需要你在开发者工具中设置日志级别为 "Verbose"。
console.info("这是一条信息。");
console.debug("这是一条调试信息,可能需要切换日志级别才能看到。");
console.table()
如果数据是数组或对象,使用 console.table() 会以表格形式展示,非常直观!
let users = [
{ id: 1, name: '张三', email: 'zhangsan@example.com' },
{ id: 2, name: '李四', email: 'lisi@example.com' },
{ id: 3, name: '王五', email: 'wangwu@example.com' }
];
console.table(users);
// 会输出一个漂亮的表格,包含 id, name, email 三列
console.group() 和 console.groupEnd()
可以将相关的日志信息分组折叠,当输出很多日志时,这能极大提高可读性。
console.group("用户信息");
console.log("用户名: Alice");
console.log("用户ID: 12345");
console.log("状态: 活跃");
console.groupEnd();
console.group("系统信息");
console.log("操作系统: Windows 11");
console.log("浏览器: Chrome");
console.groupEnd();
在控制台中,"用户信息"和"系统信息"会形成一个可以折叠/展开的树形结构。
格式化输出 (字符串插值)
现代 JavaScript (ES6+) 推荐使用 模板字符串 (Template Literals) 来格式化输出,它比传统的字符串拼接更简洁、更易读。
语法:
`字符串文本 ${JavaScript表达式} 字符串文本`
示例:
let user = 'Bob';
let points = 1000;
let loggedIn = true;
// 使用模板字符串
console.log(`欢迎, ${user}! 你当前有 ${points} 积分,`);
// 输出: 欢迎, Bob! 你当前有 1000 积分。
// 结合条件判断
console.log(`用户登录状态: ${loggedIn ? '已登录' : '未登录'}`);
// 输出: 用户登录状态: 已登录
真正的“打印”功能:window.print()
如果你想要的功能是触发浏览器的打印对话框,让用户选择将当前网页或部分内容打印到物理打印机,那么你应该使用 window.print()。
注意: 这不是 console 的一部分,它会调用浏览器自带的打印功能。
示例:
// 在页面上放一个按钮
// <button onclick="window.print()">打印此页面</button>
// 在 JS 中调用
function printPage() {
window.print();
}
当调用 window.print() 时,浏览器会显示打印预览窗口,用户可以设置打印机、纸张方向等,然后执行打印。
| 命令 | 用途 | 示例 |
|---|---|---|
console.log() |
最常用,打印普通信息,用于调试。 | console.log("Hello"); |
console.warn() |
打印警告信息,通常是黄色。 | console.warn("This is a warning."); |
console.error() |
打印错误信息,通常是红色,带堆栈。 | console.error("Something went wrong."); |
console.table() |
以表格形式打印数组或对象。 | console.table(myObject); |
console.group() |
将日志信息分组,可折叠。 | console.group("Group 1"); ... console.groupEnd(); |
window.print() |
触发浏览器打印对话框,用于物理打印。 | window.print(); |
核心要点:
- 开发调试:使用
console系列命令。 - 物理打印:使用
window.print()方法。
