ilovecolors

Automated browser refresh addon for Firefox and IE

When I was coding the last site I began feeling the pain of the process “save file-switch from IDE to browser-refresh” (or “CTRL+S|ALT+TAB|CTRL-R/F5″). I believe that the best preview for a site is in a live browser, and I always have FF3 and IE 6 or 7 opened. So after I’ve coded a feature to a site in my IDE of choice, Aptana Studio, I must save the file and go through the three browser windows hitting refresh for all of them. Sounds familiar?

So I started to look for a way to automatically refresh Firefox and IE when saving a file and I found yesterday this addon for both Firefox and Internet Explorer called XRefresh which called itself “browser refresh automation for web developers” and it sounded like all my dreams had come true!

Setting up XRefresh with IE and FF

Let’s take a quick look about how we can set XRefresh up. You can access a more in-depth tutorial on XRefresh site.

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 n 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.

2. 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.

3. 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.com\defaults\preferences\ directory, and modified it from

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

to

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

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.

Posted on Saturday, November 29th, 2008 in Technology.
RSS 2.0 feed for comments.