@starting-style getting debugged with Chrome DevToolsAlthough it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into Chrome DevTools: debugging support for CSS @starting-style rules.
The feature is enabled by default in Chrome Canary 143.0.7487.0 or newer.
~
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.
-
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 for example, DevTools does not show the
@starting-style { background-color: yellow }rule by default because that doesn’t match the state of the page.
Screenshot of DevTools inspecting a square with starting-styles. DevTools does not show the @starting-style rule because the element is currently not affected by the declarations in that rule. -
To easily discover elements that are affected by a
@starting-stylerule, a new pill is shown next to elements in the elements tree.We chose using this adorner over tucking it away in the
:hovpanel, because the latter is collapsed by default, making it hard to easily spot which elements are affected by@starting-stylerules and which elements are not.
Screenshot of DevTools inspecting a square with starting-styles. You can tell the element is affected by a @starting-style rule because it has an adorner (pill) shown next to it. -
To allow you to inspect and edit these
@starting-styles, you can click the pill to force the element into its@starting-style-state.The element will be painted with its
@starting-stylerules applied, and DevTools will therefore also shows those style rules.
Screenshot of DevTools inspecting a square with starting-styles. You can tell the element is affected by a @starting-style rule because it has an adorner (pill) shown next to it. Upon clicking the adorner, the element goes into its starting-style state, and the Styles tab also shows the relevant rule.
~
You can try out the feature in Chrome Canary 143.0.7487.0 or newer, which has the feature enabled by default.
To try it out in older Chrome Canary releases (or Chrome Beta or Chrome Dev), launch Chrome with the --enable-features=DevToolsStartingStyleDebugging CLI flag, or go to chrome://flags and flip on “DevTools @starting-style debugging” feature flag.
If you find a bug, or 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 file a Chromium bug on https://crbug.com/new or reach out to me on social media.
The one thing I am currently aware of is that toggling @starting-style on pseudo-elements is not working (see crbug/450197220). What you need to here – until I get this fixed – is force @starting-style on the originating element.
Thanks go out to pfaffe and alexrudenko on the DevTools team, and futhark on the Style team for guiding me through this 🙏
~
🔥 Like what you see? Want to stay in the loop? Here's how:
I can also be found on 𝕏 Twitter and 🐘 Mastodon but only post there sporadically.