js 中的console使用详解
console 是 JavaScript 提供的一个全局对象，常用于调试和日志记录。它包含一组方法，用于在控制台中打印消息、显示数据以及调试程序。以下是 console 常见方法的详细介绍和用法。
1. 常用方法
1.1 console.log()
- 作用：打印普通消息，最常用的日志方法。
- 用法：
console.log("Hello, world!"); console.log("Number:", 42, "Boolean:", true); - 特点：
- 支持格式化输出（如字符串插值、占位符）。
- 不同浏览器可能对复杂对象的显示方式不同。
1.2 console.info()
- 作用：打印消息，和
console.log类似，语义上用于提供信息。 - 用法：
console.info("This is an informational message.");
1.3 console.warn()
- 作用：打印警告消息，通常会在控制台显示黄色或带警告符号。
- 用法：
console.warn("This is a warning message!"); - 场景：
- 提醒潜在问题，但不一定是错误。
- 提示某些功能已废弃。
1.4 console.error()
- 作用：打印错误消息，通常会在控制台显示红色或带错误符号。
- 用法：
console.error("An error occurred!"); - 特点：
- 用于记录错误信息。
- 可能会在浏览器开发工具中标记为错误。
1.5 console.debug()
- 作用：打印调试消息，在某些浏览器中默认隐藏，需开启调试级别日志。
- 用法：
console.debug("This is a debug message.");
2. 调试相关方法
2.1 console.assert()
- 作用：如果断言条件为
false，则打印错误信息。 - 用法：
console.assert(2 + 2 === 4, "This will not log."); console.assert(2 + 2 === 5, "This will log, as the assertion fails."); - 特点：
- 用于验证假设，类似于断言工具。
2.2 console.trace()
- 作用：打印函数调用栈，帮助追踪代码执行路径。
- 用法：
function a() { b(); } function b() { c(); } function c() { console.trace("Trace example"); } a(); - 输出：
- 打印从调用位置到根调用的完整堆栈。
2.3 console.time() 和 console.timeEnd()
- 作用：测量一段代码的执行时间。
- 用法：
console.time("timer"); for (let i = 0; i < 100000; i++) {} console.timeEnd("timer"); - 特点：
console.time()开始计时。console.timeEnd()停止计时并打印耗时。- 可以使用多个计时器，计时器名称需匹配。
3. 数据显示方法
3.1 console.table()
- 作用：以表格形式打印数组或对象。
- 用法：
const data = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, ]; console.table(data); - 特点：
- 显示更直观，适合数组或对象的数据。
3.2 console.dir()
- 作用：打印对象的详细结构，类似
console.log，但显示更接近对象内部属性。 - 用法：
const obj = { foo: "bar", baz: { qux: "quux" } }; console.dir(obj);
3.3 console.group() 和 console.groupEnd()
- 作用：将日志分组，提供层级结构。
- 用法：
console.group("Outer Group"); console.log("Message 1"); console.group("Inner Group"); console.log("Message 2"); console.groupEnd(); console.groupEnd(); - 特点：
- 嵌套分组，层次清晰。
4. 控制日志输出
4.1 console.count()
- 作用：计数器，记录某段代码被调用的次数。
- 用法：
console.count("counter"); console.count("counter"); console.countReset("counter"); // 重置计数 console.count("counter");
4.2 console.clear()
- 作用：清空控制台。
- 用法：
console.clear();
5. 特殊格式
占位符格式
- 用法：
console.log("String: %s, Number: %d, Object: %o", "Hello", 42, { foo: "bar" }); - 占位符说明：
%s：字符串%d：数字%o：对象%c：CSS 样式
CSS 样式
- 用法：
console.log("%cThis is styled text", "color: red; font-size: 20px;");
6. 浏览器差异与注意事项
- 输出格式：不同浏览器显示效果可能不同，尤其是对象结构或表格。
- 性能：过多的
console输出会影响性能，生产环境建议移除调试日志。 - 调试工具扩展：结合浏览器开发者工具，可以查看变量、堆栈和时间统计。
通过灵活使用 console，开发者可以更方便地调试代码，定位问题，并展示调试信息。
原文地址：https://blog.csdn.net/jkzyx123/article/details/144425168
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！