DEV Community

Cover image for Chromium Developer Tools can do that?
Andreas
Andreas

Posted on • Updated on

Chromium Developer Tools can do that?

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, Vivaldi, Opera, the new Microsoft Edge, Google Chrome, etc).

1. Dark mode

You can activate different themes in the developer tools settings.

Dark mode in dev tools

2. Shadow Editor

There is a handy editor to manipulate the box-shadow property.

Box Shadow in dev tools

3. Color Picker

Also every color property can be adjusted with a color picker.

Color Picker in dev tools

4. Device Toolbar

No need to resize your browser window - just use the device toolbar to test responsiveness.

Device toolbar in dev tools

5. Layer Inspector

A great way to inspect nested elements is the layer inspector.

Layer inspector in dev tools

6. Force Element State

To inspect elements in a special state (e.g. when active or hovered), you can force this state with :hov.

Force element state in dev tools

Wrap it up

These are just a few useful things the Chromium Developer Tools can do - I'm sure there are a lot more!


Published: 30th January 2020

Top comments (23)

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! 😊