How do I make Firefox auto-refresh on file change?

html css firefox browser

55,370

Solution 1

From the website:

How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!

Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

It has the huge benefit of working with IETester, dynamically refreshing each open IE tab.

Try it out by adding the following to your <head>

<script type="text/javascript" src="http://livejs.com/live.js"></script>

Solution 2

Have a look at FileWatcher extension: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/

it's a WebExtension, so it works with the latest Firefox
it has a native app (to be installed locally) that monitors watched files for changes using native OS calls (no polling!) and notifies the WebExtension to let it reload the web page
reload is driven by rules: a rule contains the page URL (with regular expression support) and its included/excluded local source files
open source: https://github.com/coolsoft-ita/filewatcher

DISCLAIMER: I'm the author of the extension ;)

Solution 3

I would recommend livejs

But it has following Advantages and Disadvantages

Advantages:
1. Easy setup
2. Works seamlessly on different browsers (Live.js works in Firefox, Chrome, Safari, Opera and IE6+)
3. Don't add irritating interval for refreshing browser specially when you want to debug along with designing
4. Only refreshing when you save change ctrl + S
5. Directly saves CSS etc from firebug I have not used that feature but read on their site http://livejs.com/ that they support it too!!!

Disadvantages:
1. It will not work on file protocol file:///C:/Users/Admin/Desktop/livejs/live.html
2. You need to have server to run it like http://localhost
3. You have to remove it while deploying on staging/production
4. Doesn't serves CDN I have tried cheating & applying direct link http://livejs.com/live.js but it will not work you have to download and keep on local to work.

Solution 4

Xrefresh with firebug.

Solution 5

Firefox has an extension called mozRepl.

Emacs can plug into this, with moz-reload-on-save-mode.

when it's set up, saving the file forces a refresh of the browser window.

View more solutions

55,370

Charles Roper

Digital Services Manager at Field Studies Council.

Updated on July 05, 2022

Comments

Charles Roper almost 2 years

Does anyone know of an extension for Firefox, or a script or some other mechanism, that can monitor one or more local files. Firefox would auto-refresh or otherwise update its canvas when it detected a change (of timestamp) in the files(s).

For editing CSS, it would be ideal if just the CSS could be reloaded, rather than a full HTML re-render.

Effectively it would enable similar behaviour to Firebug with its dynamic HTML/CSS editing, only through external files.
Sampson almost 15 years

If I'm not mistaken, this will cause the page to jump around if it has scrollbars.
K. Norbert over 14 years

Is there a linux alternative by chance?
Evan Moran over 11 years

@CharlesRoper This is the bookmarklet you were looking for: pagereboot.com
Devner over 10 years

This is what I have been searching for a pretty long time and it works wonders!!! It detects the change and save of a page & instantly reloads the page and this saves me tons of time from having to reload the page every time I make a change! Thanks a ton for sharing!
gorodezkiy over 10 years

Wow, thanks! Also for all, who will use it please note, that Live.js doesn't support the file protocol. It needs http.
Blaise over 9 years

It has been superseded by LiveReload, which is shareware for Mac: $10. Don't know if it is free for other platforms. I'm using the free Auto Reload which is suggested by another comment.
Ciro Santilli OurBigBook.com over 9 years

And for Vim it's mentioned at: vim.wikia.com/wiki/…
Tebe about 9 years

Didn't work me so I wrote php script and js script. JS scripts makes request every Nth second to php script and php script checks whether files got changed. If they did it let know js that page shoud be refreshed. You can specify what extensions and what directories you would like to watch. You only need to put two files into your project and you are done. No dependencies and no third-party software in your system. More details: alexshulzhenko.ru/web-development-autorefresh-page-on-change‌s
bluenote10 over 7 years

@antongorodezkiy That's true, but there is a simple work around by loading the HTML from within python -m SimpleHTTPServer.
fpierrat over 4 years

Disadvantages #1 and #2 are OK for me. #3 can easily be worked around with a conditional inclusion serverside (include only if domain=localhost for instance). But worse than these all: I can't get it working on my local EasyPhp dev install: neither ETag nor Last-Modified headers seem to change on file updates :-(
David Frick over 3 years

This looks like the most straightforward answer. However, adding this to my flask app results in multiple calls being sent to the backend which errors out saying function did not return a valid response. I would assume the script wants something passed to the backend to work.
Sau001 over 3 years

Why did it take me so long to get to this answer!!