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?

Answer 1

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/

Answer 2

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