Chrome DevTools: CSS Angle debugging

Chrome DevTools: CSS Angle debugging

Chris Bongers
·Jan 28, 2021·

2 min read

Listen to this article

Chrome added a new cool feature to Dev Tools in version 88.

It's a CSS Angle visualization tool and can be used to debug angles better visually.

Angles can be found in gradients and transforms, for instance.

How it works:

Chrome DevTools angle visualization

Using the Chrome DevTools CSS Angle

First, we need to open the Chrome Dev Tools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Now we can go to the Elements inspector and click the element we need.

Then in the Styles section, you will see these newly added gauges.

CSS Angle Gauge in Chrome DevTools

As mentioned, it is an angle tool, so it can debug a transform that will look like this:

Chrome DevTools angle transform

Or you can use it to rotate a gradient you have on a specific element that looks like this:

Chrome DevTools gradient angle

If you want to have a play around, feel free to use this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this