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

Question

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

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

Answer 1

以下是让它运作的步骤：

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

希望它对你有用。

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

Answer 2

刚刚找到解决方案：打开DevTools后刷新页面

问题的可能原因：

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

  

DevTools已关闭调试器连接。

     

DevTools一次只支持一个连接的调试器（例如Editor或Chrome DevTools）。你想重新连接吗？ （DevTools必须先关闭）

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

此解决方案目前有效，但还有更好的方法吗？或者它是Chrome DevTools或Dart编辑器中的错误？

Answer 3

这是一个众所周知的devtools bug。随意加注它以获得其状态的任何更新。