火狐开发者控制台能否输出可展开的DOM元素HTML树？
2026-8-29
火狐控制台获取可展开DOM树结构输出的方法
Chrome和火狐开发者工具对console.log、console.dir两个方法处理DOM元素的默认渲染逻辑恰好相反：
- Chrome环境：
console.log(DOM节点)输出可展开HTML层级树，console.dir(DOM节点)输出携带全部属性的元素对象列表 - 火狐默认环境：
console.log(DOM节点)输出携带全部属性的元素对象列表，console.dir(DOM节点)输出可展开HTML层级树
要在火狐里拿到和Chrome下console.log(document.body)效果一致的可展开HTML树，有两种可行方案：
- 直接替换调用方法
直接执行console.dir(document.body)即可，火狐下这个方法对DOM元素的输出效果和Chrome的console.log(DOM节点)完全匹配，就是可展开的HTML层级树效果。 - 修改控制台默认配置，让
console.log默认输出DOM树
如果不想每次手动切换调用方法，可以直接修改火狐控制台的默认设置：- 打开火狐开发者控制台，点击面板右上角的齿轮形状设置按钮
- 在设置列表中找到DOM元素丰富输出相关选项（不同中文版本措辞略有区别，核心作用是控制DOM节点以可检查树状结构展示），调整勾选状态即可：开启该选项后，再执行
console.log(document.body)就会默认输出可展开HTML层级树，关闭则默认输出全属性对象列表。
注：这个输出差异属于两个浏览器厂商对开发者工具的默认交互设计区别，不存在功能缺失，不需要安装任何第三方插件就可以切换对应输出效果。
内容的提问来源于stack exchange，提问作者Hosein Rahnama
相关产品推荐
相关产品推荐
