提问人:Meester Moo 提问时间:4/12/2023 最后编辑:Meester Moo 更新时间:4/12/2023 访问量:55
浏览器开发工具是否提供 DOM 的准确可视化?[已结束]
Do browser development tools provide an accurate visualization of the DOM? [closed]
问:
浏览器开发工具(例如 Chrome 开发者工具)是否简化了它们向开发人员显示的“真实”DOM?换句话说,浏览器开发工具是否隐藏了浏览器认为是 DOM 一部分的任何内容?
从 javascript.info/dom-nodes:
“字符串开头/结尾处的空格和仅空格文本节点通常隐藏在工具中 与 DOM 一起使用的浏览器工具(即将介绍)通常不会在文本的开头/结尾显示空格,也不会在标签之间显示空格(换行符)。开发人员工具以这种方式节省了屏幕空间。
我想知道浏览器开发工具中是否遗漏了其他任何内容,例如“以节省空间”
答:
1赞
David
4/12/2023
#1
一些开发人员工具会省略 shadow-dom 元素(至少默认情况下是这样)。例如:
<input type="range">
此范围输入显示在 Chrome 开发工具中,如下所示:
Chrome 没有显示的是范围输入的 shadow-dom 元素,例如可拖动的拇指手柄
但是,如果我切换 Chrome 的“show user agent shadow dom”开发功能,突然间我可以看到完整的 DOM 结构,就像浏览器一样:
不过,这因浏览器而异,Safari 的 devTools 默认显示影子 DOM 元素已经有好几年了
评论