Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

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.

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.

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.


“Automated browser refresh addon for Firefox and IE” received 8 comments! Add yours.

  1. Antonin Hildebrand November 29th, 2008

    Thank you very much for this in-depth article.

    I’m sorry for problems running XRefresh. FastCSS is a tricky feature, but once you get it working you will love it.

    More details: http://getsatisfaction.com/xrefresh/topics/xrefresh_0_7_with_fast_css_update_for_firefox

    I’m going to release new XRefresh version shortly after final firebug 1.3 is out. Hope this will be pretty stable version for a while.

  2. admin November 30th, 2008

    Hi Antonin, I’m glad to see you here!
    Don’t worry, despite it’s a beta the extension works great. I’ve been using it today when I was building the form in the contact page and it worked really nice.
    I will be counting the minutes for the new versions of both Firebug and XRefresh!

  3. jefte June 26th, 2009

    Great idea, its a shame it doesn’t work reliably or work with CSS files.

    (Yes, I enabled that ‘feature’)

  4. Elliot July 28th, 2009

    The current address for XRefresh is xrefresh.binaryage.com

  5. Antony Scott September 18th, 2009

    I was hoping this would allow me to work more quickly with my ASP.NET MVC project but it doesn’t seem to work. Shame, as it’s a neat idea.

  6. Opencart Templates October 9th, 2010

    This is very useful. Gonna save me lots of time and clicks. Thanks!

  7. foto February 15th, 2011

    danke vielmals für diesen blogpost, habe lange danach gesucht, den ich brauchte ein addon für Mozilla firefox. mal sehen werde es jetzt mal installieren und bei ein paar seiten testen wie und ob es funktioniert. Vielen Dank nochmal und ich hoffe du kannst ein wenig deutsch und verstehst das hier. bis danne bye bye

  8. sali April 11th, 2011

    please send me add on

Leave a comment