Post

Oh, this is great. Thanks for putting the time into this, definitely going to be helpful!

@leifmessinger.bsky.social

Be sure to let me know how it’s working for you, and whether the design decisions I made actually make sense or not :)

Will do!

Yo, can we get a element picker/inspect mode/selector picker web helper function like elementPicker() so we could code that into snippets? Like, it would do Ctrl Shift C, wait until an element is selected, and then return $0 (the selected element)

Martin Bavio

@martinbavio.bsky.social

@sunkanmifafowora.bsky.social

Just in time as I was about to start @joshwcomeau.com’s animations course! Thank you 🙏

Sunkanmi Fafowora

Since it works for `@starting-style`, I'm guessing by nature it also works for transition-behavior? Or that's a separate thing entirely?

changerous.bsky.social

@changerous.bsky.social

How long have you been the Chrome Devil?

Chrome for Developers

@developer.chrome.com

Going above and beyond! Thanks for taking the time to build this, Bramus. 👏

goo.gle[Design] @starting-style debugging in the Styles Tab@starting-style debugging Attention: Externally visible, non-confidentialAuthor: Status: Short Link: go/chrome-devtools:starting-style-debugging-design or https://bit.ly/devtools-starting-style-deb...

The design I went for is detailed in goo.gle/devtools-sta... and differs a bit from how other browsers approach this problem.

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.

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.