DEV Community

Cover image for Chromium Developer Tools can do that?

Chromium Developer Tools can do that?

Andreas on January 30, 2020

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...
Collapse
 
madza profile image
Madza • Edited

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?

Collapse
 
devmount profile image
Andreas

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.

Collapse
 
facundocorradini profile image
Facundo Corradini

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.

Collapse
 
devmount profile image
Andreas

Awesome suggestions! Thank you so much for this addition! 👏🏻

Collapse
 
epranka profile image
Edvinas Pranka

Hi, thanks for the post. I also want to add about the chrome://inspect. It is very useful to debug remote devices.

Collapse
 
devmount profile image
Andreas

Very useful addition, thanks for this!

Collapse
 
devmount profile image
Andreas

You're welcome 👍🏻

Collapse
 
jscripter profile image
Jscripter • Edited

I find layer inspector a cute feature.

Collapse
 
devmount profile image
Andreas

Yes, it can be very helpful when you want to inspect nesting of elements!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow! I never realised there' a shadow editor in dev tools!

Collapse
 
devmount profile image
Andreas

Me neither until recently 😅

Collapse
 
artoodeeto profile image
aRtoo

thanks for this. This layer will help me debug! wooo.

Collapse
 
devmount profile image
Andreas

You're welcome, glad that it's useful for you!

Collapse
 
palakjadav3 profile image
__Palak Jadav__

Very nicely explained, Really healpful

Collapse
 
devmount profile image
Andreas

I'm glad You liked it! 😊

Collapse
 
knth profile image
KNTH

Thanks! I've totally forgot about the layer inspector!

Collapse
 
devmount profile image
Andreas

You're welcome!

Collapse
 
pavanmehta profile image
Pavan Maheshwari

Thanks. Learned about shadow editor :)

Collapse
 
devmount profile image
Andreas

Awesome! 😊

Collapse
 
a1300 profile image
a1300

Thanks

Collapse
 
devmount profile image
Andreas

You're welcome!

Collapse
 
kgingeri profile image
Karl Gingerich

Two things I didn't realise I could do - layers and :hov. Thanks Andreas.

Collapse
 
devmount profile image
Andreas

My pleasure! I'm glad it helps 😊