How to reload single file in chrome developer tools

Question

I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.

The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.

Is it possible in Chrome Developer tools to click on a source file and refresh only that file?

Answer 1

This is a bit of a hack, but I think it'll work for your scenario.

When I initially load an example page, you can see three CSS requests:

I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:

(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)

Right-click, select Edit as HTML, and then append a random query string to the end of the link:

And in the Network panel, you can see that the file was re-downloaded:

See also: Konrad's answer provides some handy code for automating this via a Snippet.

Answer 2

It might be handy, in your situation, to automate it a bit:

function reloadCSS() {
  const links = document.getElementsByTagName('link');

  Array.from(links)
    .filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
    .forEach(link => {
      const url = new URL(link.href, location.href);
      url.searchParams.set('forceReload', Date.now());
      link.href = url.href;
    });
}

reloadCSS();

What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.

You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.