Chrome DevTools: Easily change CSS units and values

Introduction

Changing CSS values/units (10px / 1rem / 20vh) can be cumbersome. Canary DevTools has some new utilities which makes this process easier:

• You can easily switch units e.g. from px to em.
• You easily update a numerical value, e.g. from 10 to 100.

How to use these features

To use these features, follow these steps within the DevTools styles pane:

1. Click on a unit type such as px or rem, for a CSS property with a length.
2. Select a new unit from the dropdown such as vh or em.
3. To update a numerical value, drag the number horizontally.
4. To update the numerical value by +/- 10, hold the ⇧ (Shift) key.

Availability

This feature is currently in Chrome Canary and should make its way to Chrome stable soon.

Further Resources

DevTools has a number of related features:

• It has the ability to change CSS values with the keyboard or mousewheel.
• It even lets you change numeric values in HTML code.
• It also supports editing values in the Sources Panel.