Category: DevTools

Inspecting Animations in DevTools

I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under ...

Chrome DevTools “Local Overrides”

There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code. Umar Hansa: Improving the performance of Soylent.com with local overrides and font-display Harry...

Using DevTools to Tweak Designs in the Browser

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually...

Set a Timed Debugger To Web Inspect Hard-To-Grab Elements

The DevTools (in any browser) are an invaluable development tool for CSS developers. If you need to see (and play with) the styles on any given element, a quick inspection is only a few clicks away. Right click on something and “Inspect Element”, or, open DevTools and use its selection tools to grab what y...