寻求可格式化输出含空白文本节点DOM树的工具方案

以下是无需自行编写JS代码就能实现需求的高效工具：

• 现代浏览器开发者工具（Chrome/Firefox/Edge）
  这是最便捷的原生方案，无需额外安装：

  • Chrome/Edge：打开开发者工具（F12）切换到「Elements」面板，点击右上角的设置图标（⚙️），在「Elements」分类下勾选「Show whitespace characters」和「Show text nodes」，就能直接看到包含空白、换行、缩进的文本节点，结构和你参考的MDN示例一致。
  • Firefox：打开开发者工具（F12）切换到「Inspector」面板，点击设置图标，勾选「Show whitespace nodes」和「Show invisible elements」，即可显示所有空白文本节点。

• 在线DOM可视化工具
  直接搜索「DOM Tree Visualizer」类在线工具，这类工具支持输入HTML代码或加载目标页面，会自动生成包含空白文本节点的结构化DOM树视图，部分工具还支持展开/折叠节点，展示逻辑和MDN示例匹配。

• 浏览器扩展：DOM Inspector++
  这款扩展增强了原生开发者工具的DOM显示能力，默认就会显示所有空白文本节点，无需手动调整设置，还能给不同类型的节点添加差异化样式，更便于区分空白文本节点和普通元素。

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