JavaScript console详细使用方法

以下是关于 JavaScript 中 console 对象的详细使用方法，涵盖基础输出、调试辅助、性能分析及样式定制等功能，并结合实际示例说明：

一、基础输出方法

1. console.log()
   最常用的调试方法，输出任意类型数据（字符串、数字、对象等）。支持占位符和模板语法：

   console.log('Hello %s!', 'World'); // 使用占位符 %s
   console.log(`Value: ${42}`);       // 模板语法
   

   • 浏览器差异：部分浏览器（如 Chrome）中 console.info() 和 log() 效果相同，但 info() 会显示感叹号图标。
2. console.error() 和 console.warn()
   • error() 以红色标记错误信息，常用于代码异常；warn() 以黄色标记警告信息：

     console.error('Division by zero!'); 
     console.warn('This API is depreciated');
     

3. console.debug()
   输出调试信息，需在浏览器中启用 verbose 模式（如 Chrome 的“详细日志”选项）才能显示。

---

二、调试辅助功能

1. 对象与结构展示
   • console.dir()：以可折叠的树形结构展示对象属性（适合查看 DOM 元素）：

     const obj = { name: 'Alice', age: 25 };
     console.dir(obj); 
     

   • console.table()：将数组或对象以表格形式输出，便于对比数据：

     const users = [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 28 }];
     console.table(users); 
     

2. 断言与计数器
   • console.assert()：条件为 false 时输出错误信息：

     console.assert(1 + 1 === 2, 'Math is broken'); 
     

   • console.count() 和 countReset()：统计代码块执行次数：

     function process() { console.count('call'); }
     process(); // call: 1
     process(); // call: 2
     console.countReset('call'); // 重置计数器
     

3. 堆栈跟踪
   console.trace() 输出调用堆栈，帮助定位代码执行路径：

   function inner() { console.trace(); }
   inner(); // 显示调用链
   

---

三、性能分析工具

1. 计时器
   console.time() 和 timeEnd() 测量代码执行时间：

   console.time('loopTime');
   for (let i = 0; i < 1e6; i++) {}
   console.timeEnd('loopTime'); // 输出 "loopTime: 123ms"
   

2. 内存监控
   console.memory（仅部分浏览器支持）显示内存使用情况：

   console.log(console.memory); // 输出当前内存分配信息
   

---

四、样式与分组管理

1. CSS 样式
   使用 %c 占位符为日志添加 CSS 样式：

   console.log('%cError: %s', 'color: red; font-weight: bold', 'File not found');
   

   支持 color、background、font-size 等属性。
2. 分组折叠
   console.group()、groupCollapsed() 和 groupEnd() 组织日志结构：

   console.group('User Data');
   console.log('Name: Alice');
   console.group塌('Address');
   console.log('New York');
   console.groupEnd();
   console.groupEnd();
   

   group collapsed 默认折叠内容。

---

五、其他实用方法

• 清空控制台：console.clear() 清除所有输出。
• DOM 元素输出：console.log() 可直接输出 HTML 元素（如 console.log(document.body)），但 dir() 更适合查看属性。

---

总结
console 对象不仅是调试工具，还能通过样式、分组、性能分析等功能提升开发效率。实际使用时需注意：

1. 生产环境建议移除 console 语句，避免性能损耗。
2. 不同浏览器对 debug、trace 等方法的支持可能不同。
   如需更完整的示例或浏览器兼容性细节，可参考 MDN 官方文档。