如何在Firefox控制台中查看与Chrome显示一致的HTML DOM结构？

Firefox默认将document等DOM对象当作普通JavaScript对象输出，会枚举所有内置属性和方法，因此会出现大量冗余信息，可通过以下几种方式调整：

1. 直接查看可交互DOM树（体验最优） #

在控制台输入inspect(document)执行后，会自动跳转至「元素」面板，展示结构清晰的可操作HTML DOM树，和Chrome点击控制台DOM节点跳转元素面板的使用体验完全一致。

2. 控制台内直接输出格式化DOM结构 #

如果需要留在控制台内查看DOM结构，使用console.dirxml(document)命令即可，该命令会输出层级清晰的可展开HTML结构，屏蔽所有冗余的对象属性，效果和Chrome直接输入document的输出完全一致。

3. 永久修改默认输出规则 #

如果希望直接输入document就得到Chrome一致的效果，可修改控制台默认配置：

• 打开Firefox控制台，点击右上角的⚙️设置按钮
• 在配置列表中找到启用DOM对象的交互式节点输出选项（不同版本Firefox描述可能略有差异，也可能标注为「将DOM对象输出为DOM树而非JS对象」），勾选该选项
• 重启控制台后生效，后续直接输入DOM相关对象都会优先展示结构树。

内容的提问来源于stack exchange，提问作者user14859193