Chrome DevTools: Quickly change numeric values in CSS and HTML code

Last updated: July 23, 2020
Quickly change numeric values in CSS and HTML code

Introduction

You can easily change numeric values in DevTools. This is a handy feature for when you want to quickly prototype CSS property values.

Instructions

For example, if the Styles Pane has a CSS rule such as:

body {
	transform: rotate(0deg);
}

You can place your cursor on the numeric portion (0deg) and use the following key combinations:

  • Alt + Up / Alt + Down increment/decrement by 0.1
    • 0deg0.1deg0.2deg
  • Up / Down increment/decrement by 1
    • 0deg1deg2deg
  • Shift + Up / Shift + Down increment/decrement by 10
    • 0deg10deg20deg
  • Cmd + Up / Cmd + Down increment/decrement by 100
    • 0deg100deg200deg
    • On Windows: Ctrl + Up / Ctrl + Down

Bonus tip with HTML elements

As a bonus tip, there is basic support for incrementing and decrementing numeric values on the Elements Panel. For example, given an element like:

<div data-item="item1"></div>

You can use the shortcuts mentioned earlier to increment and decrement the numeric value (item1item2item3, etc.) within the HTML markup.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week