console.dir 和 console.log 都是 JavaScript 中用于打印信息到控制台的常用方法，但它们有不同的使用场景和输出效果。
1. console.log
- 用途：
console.log用于输出简单的日志信息，尤其是用于查看变量、对象、数组等的值。 - 输出效果：它会直接打印数据的字符串表示。对于对象、数组等引用类型，会显示其引用的内存地址（而不是展开显示对象的内容），但在现代浏览器中，打印对象时通常会展开对象（可以点击展开查看对象的内容）。
示例：
const obj = { name: 'Alice', age: 25 };
console.log(obj); // 输出对象的基本信息，通常会展开显示属性
console.log("Hello, World!"); // 输出普通字符串
2. console.dir
- 用途：
console.dir专门用于打印对象的结构（即属性和方法）。它会以更易读的方式展示对象的内部结构，特别是在打印复杂的对象时，显示更为详细和友好。 - 输出效果：
console.dir以树形结构的形式输出对象的所有属性和方法，这对于查看对象的详细内容非常有用，尤其是在调试时。
示例：
const obj = { name: 'Alice', age: 25, hobbies: ['reading', 'swimming'] };
console.dir(obj); // 输出对象的所有属性和方法，展现对象的详细结构
主要区别
| 功能 | console.log | console.dir |
|---|---|---|
| 用途 | 打印简单的信息（字符串、数字、对象等） | 打印对象的结构（属性、方法等） |
| 输出效果 | 简单的文本输出；在对象上，通常会展开显示对象的内容 | 以树形结构显示对象的详细属性和方法 |
| 适用场景 | 适用于普通的调试信息输出 | 适用于查看和调试复杂对象的详细结构 |
总结：
- 如果你需要快速查看某个值或者简单的对象内容，使用
console.log。 - 如果你需要深入查看对象的内部结构和属性，使用
console.dir。
订阅 FreeMac
每周精选：Mac 高效技巧、免费替代付费软件、开发者工具推荐。用对你的 MacBook，省钱 + 提效。