Charles Roper Charles Roper - 6 months ago 28
HTML Question

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

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.

Answer

Live.js

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>