How to debug @starting-style at-rule in Chrome DevTools

Quick TipZoran Jambor

Learn how to debug the Starting Style at-rule in Chrome DevTools.

Chrome DevTools Elements Panel with starting-style labels
On elements with @starting-style, you can see a clickable label (1). When you toggle it (2), the @starting-style rule will appear in the Styles pane (3).

In Chrome 143+, you can find a label “starting-style” in the Elements Panel, on elements where the starting style at-rule is applied.

When you click it, the transition will be triggered, allowing you to see what it looks like, and the @starting-style rule will appear in the Styles pane, allowing you to easily tweak, edit, or debug its CSS.

Toggling the label in the Elements Panel again will trigger the transition with the changes from DevTools applied.

Demo

Links

CSS Weekly YouTube Channel

CSS Weekly YouTube Channel

Weekly hands-on tutorials, tips, tools, news, and more — everything related to CSS and front-end development, created by Zoran Jambor.

Subscribe Today »
CSS Stickers

CSS Stickers

A set of beautiful, cute, and funny CSS stickers to showcase your love for CSS.

Get Your Set Today »