Automated browser refresh addon for Firefox and IE

When coding the last site, I started feeling the pain of the process “save file-switch from IDE to browser-refresh” (or “CTRL+S|ALT+TAB|CTRL-R/F5”). As web developers, we usually have FF3 and IE 6 or 7 opened. Wouldn’t it be great if we only had to hit CTRL+S to save and refresh the browser at the same time? Well, there’s one addon for both Firefox and Internet Explorer called XRefresh claiming to provide “browser refresh automation for web developers”. Best of all, it’s available for Windows and OSX.

Setting up XRefresh with IE and FF

Let’s take a quick look about how we can set it up on Firefox and IE in Windows. Head over to XRefresh and download the Windows monitor, then follow the steps below

1. the XRefresh hub, that monitors any changes in your files. This is an executable for Win32 currently in beta (we’ll talk later about this beta state). Download, install and launch it. You will be asked to set up your sites in this window.

You can drag & drop your project folders there and they will be monitorized by XRefresh. That’s all for the monitor application, close or minimize the window. You can see its icon on the traybar, where a green icon means that it’s monitoring. Let’s see the IE and FF integration now.

1. The extension for Internet Explorer is automatically installed, launch IE now and you’re ready to go! Look for the extension in the icon bar.

2. You need Firebug from the Firefox addons area installed to run this with Firefox. XRefresh is also a Firefox addon, in fact, it’s a plugin for Firebug. Add both extensions to Firefox.

After you’ve installed both extensions (Firebug + XRefresh) and restarted Firefox, launch Firebug from the icon on the status bar and Enable XRefresh on its tab.

That’s it. You can now go and open a file within a folder you’re monitoring in a browser (or two, FF and IE) and change it in your Notepad for example. The browsers will refresh the page when you hit CTRL+S.

About the Beta state

XRefresh is still in beta, which means it still has some bugs (not that non-beta software are bug-free, right?). One bug I spotted in XRefresh is that sometimes prevents Firebug from open. If you still want to use it, you have no other chance than opening Firebug in another window. Another thing to note is that I installed Firebug in two machines, and the Firefox extension has worked in only one of them. The IE extension has worked always perfectly in both IE6 and 7.

All in all, XRefresh is a nice extension that can only get better. XRefresh is a development by Antonin Hildebrand and licensed under BSD license. You can access the XRefresh Google Code project page and suscribe to the project feeds.

Update (one hour later): I’ve been able to get XRefresh working on the other machine. I’ve just opened xrefresh.js, located in the ~firefox extensions directory~xrefresh@xrefresh.comdefaultspreferences directory, and modified it from

[code language=”js”]

pref("extensions.xrefresh.fastCSS", true);

[/code]

to

[code language=”js”]

pref("extensions.xrefresh.fastCSS", false);

[/code]

It works now in both machines (it seems it always did, but I was testing it with a css file). However, the Firebug panel still must be opened in a new window.

UPDATE 04/2010

This post is way back from 2008. XRefresh is now a mature tool that works smoothly. The code is now also available on GitHub.