1

I am a web developer and refresh the page a lot in order to see what effects my changes to css and JavaScript have. On pages with longer load times (ie: 2 - 5 seconds) it is a hassle. I am wondering if i can refresh JavaScript and CSS resources without reloading the HTML.

I was wondering if there is something in Google Chrome or other browsers that allows me to reload cache without page reload?

2
  • I would rather guess so, by making the LINK or SCRIPT tags in dynamic objects created via the DOM; then "delete" those objects and re-create them (and re-specify the attribute that specifies where a file is). However, I've found that manipulating the DOM via JavaScript can be a slow activity; that might cut into some of the proposed savings. I've no time to test this now, so for now I'm just throwing the idea out as a comment. I'm wondering if this would be more appropriate for Stack Overflow (programming)? Also, I'm not sure off-hand if this would be likely to defeat cache.
    – TOOGAM
    Commented Feb 27, 2015 at 20:00
  • Are you looking for a way to do this within the page itself? Or a way to get your browser to do this? If the first, this should be over on SO - if not, you might want to adjust your tags a bit.
    – zeel
    Commented Feb 27, 2015 at 20:27

3 Answers 3

1

You can refresh your website/blog in Google Chrome's developer tools without actually refreshing it by using the "Reload" button or the "Ctrl + R" keyboard shortcut in the Network tab. This can be useful when you want to test changes in your css or js files without losing your current state. This method allows you to refresh the website/blog without actually reloading the page,

  1. Open the Developer Tools in Google Chrome by pressing "Ctrl + Shift
    • I" or right-clicking on the webpage and selecting "Inspect".
  2. Click on the "Network" tab.
  3. Make sure that the "Disable cache" option is checked.
  4. Click on the "Reload" button or use the "Ctrl + R" keyboard shortcut to refresh the page.
  5. The page will be reloaded, and all the resources will be loaded again.
0

live-server will do this for CSS changes, but not JavaScript.

When you make a change to any file, the browser will reload the page - unless it was a CSS file in which case the changes are applied without a reload.

It works well for those that don't want to use a "heavy" IDE.

-1

There are products that do not quite what you ask but are pretty close. Some allow you to see changes live in CSS only and so on.

http://livereload.com/

Other products allow you to achieve exactly what you want but don't quite do it in the way that you want... Essentially, an environment which incorporates 'live editing'. I'm not quite certain whether there's still a performance/time hit though?

https://www.jetbrains.com/webstorm/help/live-editing-of-html-css-and-javascript.html

I guess it's just a matter of time and research before you find something that works perfectly for you're prepared to do the research?

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .