Lmst
Login

#devToolsWTF

Ana Tudor 🐯anatudor
2023-11-22

If you've had a dull day, I have just the weird bug 🐛 for you: DevTools getting confused between `tan` and `tan()` 😸

Test on codepen.io/thebabydino/pen/Jjx

Chrome bug bugs.chromium.org/p/chromium/i

Safari bug bugs.webkit.org/show_bug.cgi?i

Thanks @bramus for filing the bugs.

Doesn't happen in Firefox, but happens in both Chrome & Safari.

Screenshot. Shows Epiphany DevTools inserting the picker tool for the computed value of a --m custom property. This property is computed as tan(30deg).Screenshot. Shows Chrome DevTools inserting the picker tool for the computed value of a --m custom property. This property is computed as tan(30deg).
Ana Tudor 🐯anatudor
2023-08-23

You have cat to be kitten me right meow... why do Chrome and Safari mess with what I set in the style attribute?!

If I set el.style = `grid-area: ${ridx}/ ${cidx}`, that's what I want to see in DevTools. Not expanded to 4 values (Chrome) or to shorthands (Safari)!

Firefox DevTools displays the style value as I set it in the JS.Chrome DevTools expands the grid-area in the style attribute to 4 values, even though I only set a 2 value one.Safari DevTools expands the grid-area in the style attribute to the shorthand declarations.
Ana Tudor 🐯anatudor
2023-08-13

Are you okay, Chrome DevTools?

280x360 element. The padding is 24px in the normal state and 0px in the hovered state.

I force the hovered state from DevTools. The result on the page looks fine, the computed value shows up as 0px. It's just the box model illustration that's WTF.

Screenshot of the Computed tab in Chrome DevTools. The computed padding values are fine, but the values on the box model diagram aren't.

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst