浏览器开发工具是否提供准确的 DOM 可视化？

Question

做浏览器开发工具，例如Chrome 开发者工具在向开发者展示的内容中简化了“真正的”DOM？换句话说，浏览器开发工具是否隐藏了任何会被浏览器视为 DOM 一部分的东西？

来自 javascript.info/dom-nodes：

“字符串开始/结束处的空格和纯文本节点通常隐藏在工具中 使用 DOM 的浏览器工具（即将介绍）通常不会显示文本开始/结束处的空格和空文本节点（行-breaks) 在标签之间。开发人员工具以这种方式节省屏幕空间。”

我想知道浏览器开发工具是否遗漏了其他任何东西，比如“节省空间”

Answer 1

一些开发人员工具会省略 shadow-dom 元素（至少，默认情况下）。例如：

<input type="range">

这个范围输入出现在 Chrome 开发工具中，如下所示：

Chrome 没有显示的是范围输入的shadow-dom 元素，比如可拖动的拇指手柄

但是，如果我切换 Chrome 的“show user agent shadow dom”开发功能，突然间我可以像浏览器一样看到完整的 DOM 结构：

这因浏览器而异，Safari 的 devTools 多年来默认显示影子 DOM 元素