How to show CSS Styles of Shadow Dom in Chrome DevTools

dart google-chrome-devtools dartium dart-polymer
Marco Jakob picture Marco Jakob · Oct 11, 2013 · Viewed 13.9k times · Source

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

Nazar Hussain picture Nazar Hussain · May 21, 2014

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/

Related questions

Create a rounded button / button with border-radius in Flutter

I'm currently developing an Android app in Flutter. How can I add a rounded button?

Read More
How to add a border to a widget in Flutter?

I'm using Flutter and I'd like to add a border to a widget (in this case, a Text widget). I tried TextStyle and Text, but I didn't see how to add a border.

Read More
How do I use hexadecimal color strings in Flutter?

How do I convert a hexadecimal color string like #b74093 to a Color in Flutter? I want to use a HEX color code in Dart.

Read More