How to show CSS Styles of Shadow Dom in Chrome DevTools
Here are the steps to get it working:
- Open any Dart project in built-in Chromium
- Open Dev tool by pressing F12
- Click on the cog icon in the right top
- Enable option "Show Shadow DOM" under Elements category
- 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/
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?