BramusAlthough 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.
The design I went for is detailed in https://goo.gle/devtools-starting-style-debugging-design and differs a bit from how other browsers approach this problem.
(See next messages)
[Design] @starting-style debugging in the Styles Tab
@starting-style debugging Attention: Externally visible, non-confidential Author: Status: Short Link: go/chrome-devtools:starting-style-debugging-design or https://bit.ly/devtools-starting-style-debugging-design Created: / Last Updated: One-page overview Summary Give authors control o...
1. I expect **correctness** from DevTools, and have it show only what you are actively seeing on the screen.
When inspecting a square in https://codepen.io/bramus/pen/MWPLgjy , we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.
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.
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.
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.
Thanks go out to pfaffe and alexrudenko on the DevTools team, and futhark on the Style team for guiding me through this 🙏