DEV Community

loading...
Cover image for Chromium Developer Tools can do that?

Chromium Developer Tools can do that?

devmount profile image Andreas ・Updated on ・1 min read

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

Discussion (24)

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 Author

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 Author

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 Author

Very useful addition, thanks for this!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
devmount profile image
Andreas Author

Me neither until recently 😅

Collapse
artoodeeto profile image
aRtoo

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

Collapse
devmount profile image
Andreas Author

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 Author

I'm glad You liked it! 😊

Collapse
jscripter profile image
Jscripter • Edited

I find layer inspector a cute feature.

Collapse
devmount profile image
Andreas Author

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

Collapse
a1300 profile image
a1300

Thanks

Collapse
devmount profile image
Andreas Author

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 Author

My pleasure! I'm glad it helps 😊

Collapse
pavanmehta profile image
Pavan Maheshwari

Thanks. Learned about shadow editor :)

Collapse
devmount profile image
Andreas Author

Awesome! 😊

Collapse
kevinnth profile image
KevinNTH

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

Collapse
devmount profile image
Andreas Author

You're welcome!

Collapse
yujiri8 profile image
Ryan Westlund

Nice, thanks! The dark mode will make my battery even more invincible :)

Collapse
devmount profile image
Andreas Author

You're welcome 👍🏻

Forem Open with the Forem app