3 ms·
You may already be aware, but you can click on the "computed styles" tab for an element (in the devtools elements panel), and it will show you the exact values
by danielvaughn 4y ago
You may already be aware, but you can click on the "computed styles" tab for an element (in the devtools elements panel), and it will show you the exact values that were rendered. Much much much easier than trying to understand how the written CSS cascades down to that specific element.
- brundolf 4y agoThe thing is though, as soon as you take it out of context (change the DOM structure, drop the nearby styles that don't directly target that element, etc) things are often going to stop behaving the way you want. At that point you honestly just have to know how to work with CSS for real if you want to get the desired outcome, which makes me skeptical of a tool that claims to let you clip out a piece of the page with all the CSS behavior intact
- bobthepanda 4y agoI find it isn’t great at targeting styles that aren’t static, like animations. There isn’t really a playback/play forward mechanism in devtools for css.
- spread_love 4y agoYes there is, in the Animations tab. https://developer.chrome.com/docs/devtools/css/animations/ https://developer.chrome.com/docs/devtools/css/animations/