DevTools Tips

Categories: Supported by:

Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margins, and other CSS number values quickly.

Manually entering new numbers works of course, but it gets in the way of creativity a little bit.

In DevTools you can change numbers by using the arrow keys on your keyboard, this way you can easily and quickly test changes while checking the result in real time in the page. But there's more, you can also hold the various control keys to change the speed at which the numbers increment:

GIF animation of the Styles panel in Edge showing how numbers can be changed in various increments