如何在Chrome DevTools中显示Shadow Dom的CSS样式

Question

我使用Dart Polymer创建Web组件。为了调试CSS样式，我在Dartium中启动了该应用，然后使用Chrome DevTools检查了样式。

问题在于，尽管正确应用了<style>标签中定义的所有样式，<polymer-element>它们都不会出现在DevTools中！在哪里可以找到那些样式？

Answer 1

以下是使其正常工作的步骤：

1. 在内置Chromium中打开任何Dart项目
2. 通过按F12打开Dev工具
3. 单击右上角的齿轮图标
4. 在“元素”类别下启用选项“显示阴影DOM”
5. 转到“元素”面板，您将看到具有所有样式的组件DOM

希望它对您有用。

感谢：http : //oliversmith.io/technology/2012/05/19/inspecting-the-shadow-dom-in-google-chrome-inspector/

Answer 2

这是一个已知的开发工具错误。请随时为其加注星标以获取有关其状态的任何更新。