浏览器开发工具是否提供 DOM 的准确可视化?[已结束]

Do browser development tools provide an accurate visualization of the DOM? [closed]

提问人:Meester Moo 提问时间:4/12/2023 最后编辑:Meester Moo 更新时间:4/12/2023 访问量:55

问:


想改进这个问题吗?通过编辑这篇文章来更新问题,使其仅关注一个问题。

8个月前关闭。

浏览器开发工具(例如 Chrome 开发者工具)是否简化了它们向开发人员显示的“真实”DOM?换句话说,浏览器开发工具是否隐藏了浏览器认为是 DOM 一部分的任何内容?

从 javascript.info/dom-nodes:

“字符串开头/结尾处的空格和仅空格文本节点通常隐藏在工具中 与 DOM 一起使用的浏览器工具(即将介绍)通常不会在文本的开头/结尾显示空格,也不会在标签之间显示空格(换行符)。开发人员工具以这种方式节省了屏幕空间。

我想知道浏览器开发工具中是否遗漏了其他任何内容,例如“以节省空间”

HTML DOM 浏览器

评论

0赞 Heretic Monkey 4/12/2023
浏览器开发工具提供了 DOM 的准确可视化,不会隐藏任何被浏览器的 DOM 引擎视为 DOM 一部分的内容。你有理由怀疑浏览器开发工具的真实性吗?这听起来像是一个更有趣的问题......
0赞 Meester Moo 4/12/2023
@HereticMonkey 来自 javascript.info/dom-nodes:“字符串开头/结尾处的空格和仅空格文本节点通常隐藏在工具中 使用 DOM 的浏览器工具(即将介绍)通常不会在文本的开头/结尾显示空格,也不会在标签之间显示空格(换行符)。开发人员工具以这种方式节省了屏幕空间。我想知道浏览器开发工具中是否遗漏了其他任何内容,例如“以节省空间”
0赞 Heretic Monkey 4/12/2023
我会在你的问题中加上这个解释,因为它现在相当贫血。但即便如此,这也是一个相当广泛的“列表”问题。

答:

1赞 David 4/12/2023 #1

一些开发人员工具会省略 shadow-dom 元素(至少默认情况下是这样)。例如:

<input type="range">

此范围输入显示在 Chrome 开发工具中,如下所示:

enter image description here

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

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

enter image description here

不过,这因浏览器而异,Safari 的 devTools 默认显示影子 DOM 元素已经有好几年了