How to reload a single file in chrome developer tools

Question

I am working on a complex website that has many css and js files that are uploaded to each page. I am working on one css using the Chrome developer tools. Once css is mostly true in the developer’s tools (Element tab, Styles panel), css is copied to the local css file and then uploaded to the web server. Since only one css file was changed, it would be faster to reload one css file instead of hard updating and reloading the whole site, including images, js and css, etc.

The site has the ability to minimize the css file and combine it with other css files by creating one very large css file. This option is disabled during development. Adding a version number to the css file name is not the trick I'm looking for.

Is it possible that in the Chrome developer tools, click on the source file and update only this file?

Answer 1

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

When I initially load the sample page, you can see three CSS requests:

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

(Command + F Mac Control + F Windows/Linux ... DOM)

, HTML, :

, :

: Konrad Snippet.

Answer 2

:

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;
    });
}

, CSS , URL-.

. , snippets ' .

Answer 3

In my opinion, only live editing is the only possible way you're looking for, I suppose. Unable to update single css file.