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

Question

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

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

Answer 1

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

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

希望它对你有用。

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

Answer 2

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

Answer 3

刚找到解决方案：打开开发工具后刷新页面

问题的可能原因：

打开 DevTools 时，Dart 编辑器会报告：

调试器连接已被 DevTools 关闭。

DevTools 一次仅支持一个连接的调试器（例如 Editor 或 Chrome DevTools）。是否要重新连接？（必须先关闭开发工具）

因此，Dart 编辑器调试器可能会有一些干扰。关闭与 Dart 编辑器调试器的连接并刷新页面时，DevTools 将正常工作。

这个解决方案目前有效，但是有更好的方法吗？还是Chrome DevTools或Dart Editor中的错误？