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

【问题标题】：How to show CSS Styles of Shadow Dom in Chrome DevTools如何在 Chrome DevTools 中显示 Shadow Dom 的 CSS 样式
【发布时间】：2013-10-11 11:05:35
【问题描述】：

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

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

【问题讨论】：

标签： dart google-chrome-devtools dartium dart-polymer

【解决方案1】：

以下是让它工作的步骤：

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

希望它对你有用。

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

【讨论】：

【解决方案2】：

这是一个已知的devtools bug。随意加注星标以获取有关其状态的任何更新。

【讨论】：

【解决方案3】：

刚刚找到解决办法：打开DevTools后刷新页面

问题的可能原因：

当 DevTools 打开时，Dart Editor 报告：

调试器连接已被 DevTools 关闭。

DevTools 一次仅支持一个连接的调试器（例如编辑器或 Chrome DevTools）。您要重新连接吗？（必须先关闭 DevTools）

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

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

【讨论】：