console.log 和 console.dir 都是 JavaScript 中用于在浏览器控制台打印信息的方法 ，二者主要有以下区别：
输出内容和格式
- console.log：主要用于输出简单的日志信息，直接打印数据的字符串表示 。对于对象、数组等引用类型，在现代浏览器中通常会展开显示对象的属性，但本质是显示其字符串化后的内容 。比如：
const person = { name: 'Alice', age: 30 };
console.log(person);
// 输出类似 {name: "Alice", age: 30} ，是对象的字符串表示形式
它也支持多参数输出，会将多个参数连接起来显示 ，像 console.log('姓名：', person.name, '，年龄：', person.age); 。
- console.dir：专门用于展示对象的结构，以树形结构的形式输出对象的所有属性和方法 ，方便深入查看对象内部细节 。例如：
const person = { name: 'Alice', age: 30 };
console.dir(person);
// 会以更像文件目录树的交互列表形式展示对象的属性和方法，可展开查看详细内容
不过它仅处理第一个参数，如果传入多个参数，只会显示第一个参数对象的结构 。
对 DOM 元素的显示
- console.log：显示 DOM 元素的 HTML 结构 。比如
console.log(document.body);，会展示<body>标签及其内部包含的 HTML 内容 。 - console.dir：显示 DOM 对象的属性 。例如
console.dir(document.body);，会列出document.body这个 DOM 对象所具有的各种属性，如clientHeight、clientWidth等 。
交互性
- console.log：输出的信息交互性有限，主要是展示信息，一般不能对输出内容进行进一步交互操作 。
- console.dir：输出的对象属性列表具有可展开性，能像操作文件目录树一样展开或收起属性，更便于查看和分析对象详细信息 。
标准性和兼容性
- console.log：是标准的控制台输出方法，被所有现代浏览器支持 。
- console.dir：属于非标准特性，虽然在大多数现代浏览器中可用，但从规范角度不建议在生产环境中大量使用，不过在调试场景下使用较方便 。
一般来说，如果只是快速查看变量值、简单输出信息，使用 console.log ；若要深入分析对象结构，特别是调试 DOM 对象属性时，console.dir 更合适 。
)
![[ctfshow web入门] web124](http://pic.xiahunao.cn/[ctfshow web入门] web124)
