How to show CSS Styles of Shadow Dom in Chrome DevTools

Question

I use Dart Polymer to create web components. To debug CSS styles I start the app in Dartium and use Chrome DevTools to inspect the styles.

The problem is that all the styles defined in the <style> tag of <polymer-element> do not appear in DevTools altough they are applied correctly! Where can I find those styles?

Eos

Answer 1

This is a known devtools bug. Feel free to star it to get any updates on its status.

Handclasp

Answer 2

Here are the steps to get it working:

1. Open any Dart project in built-in Chromium
2. Open Dev tool by pressing F12
3. Click on the cog icon in the right top
4. Enable option "Show Shadow DOM" under Elements category
5. Go to Elements panel and you will see the component DOM with all styles

Hope it will works for you.

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

Dunleavy

Answer 3

Just found a solution: Refresh the page after opening DevTools

Possible reason for the problem:

When DevTools is opened, the Dart Editor reports:

The debugger connection has been closed by DevTools.

DevTools only supports one connected debugger (e.g. Editor or Chrome DevTools) at a time. Do you want to re-connect? (DevTools must be closed first)

So there might be some interference from the Dart Editor Debugger. When the connection to the Dart Editor Debugger is closed and the page is refreshed, DevTools works correctly.

This solution works for the moment, but is there a better way? Or is it a bug in Chrome DevTools or in the Dart Editor?

Eos