您如何看待 Chrome 和 Firefox 开发工具中 HTML5 标签的 pre-DOM 标记答案

【问题标题】：How do you see the pre-DOM markup of HTML5 tags in Chrome and Firefox dev tools您如何看待 Chrome 和 Firefox 开发工具中 HTML5 标签的 pre-DOM 标记
【发布时间】：2014-05-08 08:23:53
【问题描述】：

我在css-tricks.com 上阅读了一篇关于 HTML5 进度元素的文章，在页面下方大约 1/8 处，我注意到了一个示例，说明如何使用两个伪类 -webkit-progress-bar 和 -webkit-progress-value 设置元素样式。从屏幕截图中，您可以看到这些类在两个 div 容器上与伪属性一起使用，但是当我在自己的示例中使用进度元素时，我在任何地方都看不到 div。

我需要启用 Chrome 开发工具中的巧妙设置还是需要依赖 javascript DOM 事件来查看标记？ Firebug中是否有类似的解决方案？

【问题讨论】：

标签： html developer-tools

【解决方案1】：

它被称为影子 DOM。要在 Chrome/Chromium 中访问它，请打开 DevTools 设置并选中“显示用户代理影子 DOM”

结果是：

【讨论】：

迟到总比没有好，但这正是我想要的——感谢 alpipego :-)