Here are some useful features of the Chromium Developer Tools, you may have missed so far. Those should work in every Chromium based browser (Brave...
For further actions, you may consider blocking this person and/or reporting abuse
Nice features, especially layer inspector.. I always thought nesting should be inspected in 3D in order to get a better understanding of whats going on.
What app/extension did you use to record these GIFs, btw?
The layer inspector is indeed very handy, especially on pages with deeper nesting (I only showed a very simple example in this article).
I'm using ScreenToGif to record my screen. It's a really useful open source tool to quickly create screencasts.
I love how devtools have evolved in the last couple of years. Both Firefox and Chrome have great things available. But since we're talking Chrome, one of my favourites is the Rendering drawer (if you don't have it visible, run command --> show rendering)
Paint flashing and FPS meter are outstanding to debug performance, and the ability to emulate prefers-reduced-motion and prefers-color-scheme are great for accessibility testing.
Awesome suggestions! Thank you so much for this addition! 👏🏻
Hi, thanks for the post. I also want to add about the chrome://inspect. It is very useful to debug remote devices.
Very useful addition, thanks for this!
You're welcome 👍🏻
I find layer inspector a cute feature.
Yes, it can be very helpful when you want to inspect nesting of elements!
Wow! I never realised there' a shadow editor in dev tools!
Me neither until recently 😅
thanks for this. This layer will help me debug! wooo.
You're welcome, glad that it's useful for you!
Very nicely explained, Really healpful
I'm glad You liked it! 😊
Thanks! I've totally forgot about the layer inspector!
You're welcome!
Thanks. Learned about shadow editor :)
Awesome! 😊
Thanks
You're welcome!
Two things I didn't realise I could do - layers and :hov. Thanks Andreas.
My pleasure! I'm glad it helps 😊