浏览器打印日志方法与技巧
在浏览器中，开发者通常通过 console 对象来打印日志，用于调试和跟踪代码执行。以下是常见的日志打印方式及实用技巧：
1. 基础日志方法
(1) console.log()
- 用途：输出普通信息。
- 示例：
console.log("Hello World"); // 字符串 console.log({ name: "John", age: 30 }); // 对象 console.log("Value:", value); // 动态值
(2) console.info()
- 用途：输出提示性信息（部分浏览器会显示图标）。
console.info("This is an info message");
(3) console.warn()
- 用途：输出警告信息（黄色背景）。
console.warn("This is a warning");
(4) console.error()
- 用途：输出错误信息（红色背景，包含堆栈跟踪）。
console.error("This is an error");
(5) console.debug()
- 用途：输出调试信息（默认可能被浏览器隐藏，需手动开启显示）。
console.debug("Debug message");
2. 结构化日志
(1) console.table()
- 用途：以表格形式展示数组或对象。
const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]; console.table(users);
(2) console.dir()
- 用途：显示对象的详细属性（如 DOM 元素的结构）。
console.dir(document.body);
(3) console.group() 与 console.groupCollapsed()
- 用途：将日志分组显示（
groupCollapsed默认折叠）。console.group("User Details"); console.log("Name: Alice"); console.log("Age: 25"); console.groupEnd();
3. 调试与分析
(1) console.trace()
- 用途：输出函数调用堆栈。
function foo() { console.trace(); } foo();
(2) console.time() 与 console.timeEnd()
- 用途：计算代码执行时间。
console.time("Timer"); // 执行代码... console.timeEnd("Timer"); // 输出耗时
(3) console.assert()
- 用途：条件断言，仅当表达式为
false时输出。console.assert(x > 0, "x is not positive");
4. 高级技巧
(1) 格式化输出
使用 % 占位符格式化内容：
console.log("User: %s, Score: %d", "Alice", 95);
// %s 字符串, %d 数字, %o 对象, %c CSS 样式
(2) 自定义样式
通过 %c 添加 CSS 样式：
console.log("%cImportant Message", "color: red; font-size: 20px;");
(3) 条件输出
仅在特定条件下打印日志（避免污染生产环境）：
if (isDev) {console.log("Debug data:", data);
}
(4) 清空控制台
console.clear(); // 清空控制台所有日志
5. 注意事项
- 生产环境：建议使用构建工具（如 Webpack）移除
console语句。 - 浏览器兼容性：绝大多数现代浏览器支持上述方法，但部分方法（如
console.table）在旧版浏览器中可能不可用。 - 性能：频繁的
console操作可能影响页面性能，尤其是循环或高频触发场景。
通过灵活组合这些方法，可以更高效地调试和分析浏览器端的代码行为。