Chrome DevTools: Easily change CSS units and valuesLast updated: 29th October 2021
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
- You easily update a numerical value, e.g. from
How to use these features
To use these features, follow these steps within the DevTools styles pane:
- Click on a unit type such as
rem, for a CSS property with a length.
- Select a new unit from the dropdown such as
- To update a numerical value, drag the number horizontally.
- To update the numerical value by +/-
10, hold the ⇧ (Shift) key.
This feature is currently in Chrome Canary and should make its way to Chrome stable soon.
DevTools has a number of related features: