Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show CSS Styles of Shadow Dom in Chrome DevTools

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?

like image 433
Marco Jakob Avatar asked Oct 11 '13 11:10

Marco Jakob


2 Answers

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/

like image 103
Nazar Hussain Avatar answered Oct 02 '22 23:10

Nazar Hussain


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

like image 20
Andrey Lushnikov Avatar answered Oct 02 '22 23:10

Andrey Lushnikov