Chrome DevTools: CSS Angle debugging


Chrome version 88 comes packed with a cool new angle debugging tool

28 Jan, 2021 · 2 min read

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:

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:

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

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

See the Pen Chrome DevTools: CSS Angle debugging by Chris Bongers (@rebelchris) on 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Chrome 107: Keyboard shortcuts

7 Nov, 2022 · 2 min read

Chrome 107: Keyboard shortcuts

Chrome DevTools: Recorder

21 Jan, 2022 · 3 min read

Chrome DevTools: Recorder

Join 2096 devs and subscribe to my newsletter