If you are a web developer, you have most likely thought to yourself occasionally, “I really wish I didn’t have to hit refresh a million times a day to see my changes take effect…”. Well, finally there is an answer: LiveReload comes to the rescue with a tool which automatically refreshes the browser whenever some of the files used by it are changed.

The 2.0 version is a nice Mac App, which I am using at home, but I also tried out version 1.x which is distributed as a RubyGem, and it worked fine on Ubuntu… and it apparently works fine on Windows too (after you have installed Ruby… see instructions on the GitHub readme).

After you have installed the app or gem, you can either embed a JavaScript on your page, or install browser plugins . I opted for the plugin route, which adds a button to your browser chrome allowing you to enable LiveReload for the current URL. Note that it is necessary to restart the browser completely for it to work. This means on Firefox you will need to restart twice: once to install the plugin, and again to get it working. Another issue I saw with Firefox was that the button didn’t show up on the addons toolbar, so I had to ‘customize’ my toolbars and add the ‘LR’ button which was now available as an option.

The other thing you need to do is tell LiveReload which folders to watch for changes. On the Mac App, you can use the Finder to select the folders, while with the RubyGem you need to give the folders as command line arguments.. or just type ‘livereload’ in the folder you want to watch, if there is only one.

Another benefit of LiveReload is that you can hitch multiple browsers up at once, to verify that your code behaves consistently across browsers. Great for cross-browser testing while you work.

Furthermore, when you are writing specs or unit tests for your code, you can have the tests running in another browser, and watch as they pass or fail, all without leaving your editor.

Finally, the version 2 has options to auto-compile SASS, Less, CoffeeScript and similar meta-languages which compile into HTML, CSS, or JavaScript. While the Mac App is initially free to use (it is still beta, but I did not experience any problems), I see that the update to the final 2.0 version will require some payment. However, if you just want auto-refreshing on changes, without pre-compilation, then you can continue to use the 1.0 version (or presumably the Beta App ?).

In case you are wondering how LiveReload works, I took a gander at the Javascript which the plugin embeds, and it uses WebSockets to receive notifications from the livereload app, which starts up a socket server

I think LiveReload is going to make my experience as a web developer much less annoying and more Zen-like :)

ps. I am not being paid by LiveReload to say any of this.. If you know of any other solutions to this perennial problem, I would certainly be interested to hear of them!