«   Previous tip Next tip   »

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

Last updated: 26th July 2020
Quickly change numeric values in CSS and HTML code


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


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:

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.

«   Previous tip Next tip   »

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