0

I have a lifetime of looking at this, as natural as can be in Dev Tools.

<div>
   <span>Hi :)</span>
</div>

I am enjoying using Web Components, but what I don't like is this, forcing me to essentially click twice as often. 

<cool-div>
   #shadowroot
       <cool-span>
            #shadowroot
                  "Hi :)"
       </cool-span>
</cool-div>

Do I have any options to make this a bit easier to work with in dev tools? I mean a good start might be as simple as expanding cool-div would expand its #shadowroot so that I don't have to click twice but ideally also getting rid of the fact that I can fit half of the vertical content on my screen. I'd take any tips that make it a bit less awkward.

Thanks.

Clark
  • 2,598
  • 3
  • 27
  • 41
  • 1
    There's no such option but you can click with `Alt` key pressed to expand all children. Note that components have a noticeable initialization overhead so if you think an extra line is a problem then maybe you shouldn't use components :-) – wOxxOm Feb 28 '20 at 21:36
  • Thanks Woxxom, Yeah I am from Angular in my day job, but I just find this an annoyance. I know they are shadowroot, I don't feel like I need to see 40 lines out of 80 lines of vertical space telling me each of my custom elements has a shadowroot but I will keep Alt in mind. – Clark Feb 28 '20 at 21:44
  • Not for the faint hearted: The Dev Tools window itself is a web-application, so you can [open an Inspector](https://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome) on the Dev Tools Inspector (ctrl-shft-I) and run snippets. Once comfy with that you write your own DevTools-Extension: https://developer.chrome.com/extensions/devtools – Danny '365CSI' Engelman Feb 29 '20 at 14:52
  • [Snippets by Sidney Nemzer](https://chrome.google.com/webstore/detail/snippets/fakjeijchchmicjllnabpdkclfkpbiag) is an extension for the DevTools window, edits/stores your snippet as GitHub Gists (unlike the DevTools Snippets itself which are saved in your (local device) Browser profile) – Danny '365CSI' Engelman Feb 29 '20 at 14:59
  • This sounds like an excellent feature request: https://bugs.chromium.org/p/chromium/issues/list – abraham Mar 02 '20 at 14:36

0 Answers0