Chromium Developer Tools can do that?

Publish Date: Jan 30 '20

248 24

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.

2. Shadow Editor

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

3. Color Picker

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

4. Device Toolbar

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

5. Layer Inspector

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

6. Force Element State

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

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

Comments 24 total

MadzaJan 30, 2020

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?
- AndreasJan 30, 2020
  
  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.
aRtooJan 30, 2020

thanks for this. This layer will help me debug! wooo.
- AndreasJan 30, 2020
  
  You're welcome, glad that it's useful for you!
Facundo CorradiniJan 30, 2020

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.
- AndreasJan 30, 2020
  
  Awesome suggestions! Thank you so much for this addition! 👏🏻
a1300Jan 30, 2020

Thanks
- AndreasJan 30, 2020
  
  You're welcome!
Edvinas PrankaJan 30, 2020

Hi, thanks for the post. I also want to add about the chrome://inspect. It is very useful to debug remote devices.
- AndreasJan 30, 2020
  
  Very useful addition, thanks for this!
AndreasJan 30, 2020

You're welcome 👍🏻
Pavan MaheshwariJan 31, 2020

Thanks. Learned about shadow editor :)
- AndreasJan 31, 2020
  
  Awesome! 😊
Vaibhav KhulbeJan 31, 2020

Wow! I never realised there' a shadow editor in dev tools!
- AndreasJan 31, 2020
  
  Me neither until recently 😅
JscripterJan 31, 2020

I find layer inspector a cute feature.
- AndreasJan 31, 2020
  
  Yes, it can be very helpful when you want to inspect nesting of elements!
__Palak Jadav__Jan 31, 2020

Very nicely explained, Really healpful
- AndreasJan 31, 2020
  
  I'm glad You liked it! 😊
KNTHFeb 4, 2020

Thanks! I've totally forgot about the layer inspector!
- AndreasFeb 4, 2020
  
  You're welcome!
Karl GingerichFeb 5, 2020

Two things I didn't realise I could do - layers and :hov. Thanks Andreas.
- AndreasFeb 5, 2020
  
  My pleasure! I'm glad it helps 😊

Add comment

Andreas @devmount