Select Page

Category: DevTools

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 with local overrides and font-display Harry Roberts: Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools inside DevTools to see if your changes had the effect you wanted them to have. Great for showing a client a change without them having to set up a whole dev environment for you. Direct Link to Article — Permalink The post Chrome DevTools “Local Overrides” appeared first on CSS-Tricks....

Read More

Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

From Johnny’s dev blog: The challenge: Calculate the real percentage of unused CSS Our goal is to create a script that will measure the percentage of unused CSS of this page. Notice that the user can interact with the page and navigate using the different tabs. DevTools can be used to measure the amount of unused CSS in the page using the Coverage tab. Notice that the percentage of unused CSS after the page loads is ~55%, but after clicking on each of the tabs, more CSS rules are applied and the percentage drops down to just ~15%. That’s why I’m so skeptical of anything that attempts to measure “unused CSS.” This is an incredibly simple demo (all it does is click some tabs) and the amount of unused CSS changes dramatically. If you are looking for accurate data on how much unused CSS is in your codebase, in an automated fashion, you’ll need to visit every single URL on your site and trigger every possible event on every element and continue doing that until things stop changing. Then do that for every possible state a user could be in—in every possible browser. Here’s another incredibly exotic way I’ve heard of it being done: Wait a random amount of time after the page loads Loop through all the selectors in the CSSOM Put a querySelector on them and see...

Read More