Chromium Developer Tools can do that?

Andreas - Jan 30 '20 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .