Как показать стили CSS из теневого дома в Chrome DevTools

Question

Я использую Dart Polymer для создания веб-компонентов. Чтобы отлаживать стили CSS, я запускаю приложение в Dartium и использую Chrome DevTools для проверки стилей.

Проблема в том, что все стили, определенные в теге <style><polymer-element>, не отображаются в DevTools, хотя они применяются правильно! Где я могу найти эти стили?

Answer 1

Это devtools bug. Не стесняйтесь запускать его, чтобы получать какие-либо обновления по его статусу.

Answer 2

Просто нашел решение: обновить страницу после открытия Devtools

Возможной причиной проблемы:

Когда DevTools открыт, сообщает Дарт Редактор:

соединение отладчика было закрыто DevTools.

DevTools поддерживает только один подключенный отладчик (например, редактор или Chrome DevTools) за раз. Вы хотите снова подключиться? (Сначала должны быть закрыты DevTools)

Так может возникнуть некоторая помеха от отладчика Editor Dart Editor. Когда соединение с Dugg Editor Debugger закрывается и страница обновляется, DevTools работает правильно.

Это решение работает на данный момент, но есть ли лучший способ? Или это ошибка в Chrome DevTools или в Dart Editor?

Answer 3

Вот шаги, чтобы заставить его работать:

1. Открыть любой проект Dart во встроенном в Chromium
2. Open Dev инструмент, нажав F12
3. Нажмите на значок шестеренки в правом верхнем
4. Включить опцию «Show Shadow DOM» под категории Элементы
5. Перейти к Элементы панели и вы увидите компонент DOM со всеми стилями

Надеюсь, что это сработает для вас.

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