JavaScript 中 console.dir 与 console.log 的深度解析

前言

在 JavaScript 开发中，控制台调试是每个开发者必备的技能。其中 console.log 和 console.dir 这两个方法看似相似，实则有着重要的区别。本文将深入解析它们的差异，并通过实际案例演示不同场景下的最佳选择。

核心区别对比

特性	console.log	console.dir
输出格式	对象字符串表示	交互式属性列表
参数处理	支持多参数	仅处理第一个参数
DOM 元素显示	显示 HTML 结构	显示 DOM 对象属性
特殊类型处理	智能类型转换	严格对象展示
交互性	有限	可展开查看属性

典型使用场景

1. 普通对象输出

const user = { 
    name: '张三', 
    profile: {
        age: 25,
        skills: ['JavaScript', 'Node.js']
    }
};

console.log(user);
// 输出: ▶ Object {name: '张三', profile: {…}}

console.dir(user);
// 输出可展开的树形结构：
// ▼ Object
//   name: "张三"
//   ▼ profile: Object
//     age: 25
//     skills: Array(2)

2. DOM 元素调试

const element = document.querySelector('div');

// 显示完整的 HTML 元素结构
console.log(element);  // <div class="container">...</div>

// 显示 DOM 对象的属性列表
console.dir(element);  // ▼ HTMLDivElement
                      //   accessKey: ""
                      //   ariaAtomic: null
                      //   ...

3. 特殊类型处理

const date = new Date();

console.log(date);  // Wed Feb 14 2024 10:30:00 GMT+0800
console.dir(date);  // ▼ Date Wed Feb 14 2024 10:30:00 GMT+0800
                    //   __proto__: Date

运行环境差异

1. Node.js 环境：

const fs = require('fs');

console.log(fs);   // 显示完整的模块对象结构
console.dir(fs, { depth: null });  // 通过配置项显示完整嵌套结构

2. 浏览器环境：

console.log(window.location);  // 显示 Location 对象字符串
console.dir(window.location);  // 显示可展开的 Location 属性树

最佳实践建议

1. 需要快速查看对象内容时 → 使用 console.log
2. 需要深入分析对象属性时 → 使用 console.dir
3. 调试 DOM 元素属性时 → 优先使用 console.dir
4. 需要格式化输出时 → 结合 console.log 的字符串替换功能
5. 查看函数体内容时 → 使用 console.dir

高级技巧

// 1. 限制展示层级
console.dir(obj, { depth: 1 });

// 2. 组合使用技巧
console.log('当前状态:', new Date());
console.dir(document.body, { showHidden: true });

// 3. 样式化输出（仅限log）
console.log('%c特别提示', 'color: red; font-size: 20px;');

总结

console.log 更适合快速查看变量值，而 console.dir 在需要深入分析对象结构时表现更优。理解二者的差异可以帮助开发者：

• 更精准地定位问题
• 提升调试效率
• 避免因显示方式导致的误解
• 在不同环境下选择最佳调试方案

建议在实际开发中根据具体需求灵活选择，必要时可以两者结合使用以获得更全面的信息。