There's now +4 hours of video content on ModernDevTools.com!

«   Previous tip Next tip   »

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

23rd July 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:

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