Post

Bramus
@bram.us

Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules. The feature is ready for testing in Chrome Canary.

Bramus
@bram.us

1. I expect **correctness** from DevTools, and have it show only what you are actively seeing on the screen. When inspecting a square in codepen.io/bramus/pen/M..., we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.

0 reposts2 likes

Bramus
@bram.us

2. To easily **discover** elements that are affected by a `@starting-style` rule, a new pill is shown next in the elements tree. We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.

Bramus
@bram.us

3. To allow you to **inspect and edit** these `@starting-style`s, you can click the pill to force the element into its `@starting-style`-state. The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.

Bramus
@bram.us

You can try out the feature in Chrome Canary by launching Canary with the `--enable-features=DevToolsStartingStyleDebugging` CLI flag, or by flipping on “DevTools @starting-style debugging” through `chrome://flags`.

Bramus
@bram.us

If you find a bug, have a demo where it’s not working as you’d expect it to work, or have feedback about this in general: feel free to reach out to me here (DM) or file a Chromium bug.