How to reload single file in chrome developer tools

Viewed 6532

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?

4 Answers

If you don't mind refreshing the page, but don't want to re-download all resources, try the following.

  • Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
  • Hard-refresh this tab (ctrl/cmd + f5);
  • Soft-refresh the page (f5 or ctrl/cms + r).
Related