Download Source Files
You know the drill: make some edits to your document, click save, switch over to your browser, refresh it, and then observe the changes. Wouldn’t it be convenient if there was to auto-refresh your browser at a provided interval? That way, for instance, every three seconds, the browser will automatically refresh. Granted, this isn’t too practical for heavy websites, however, when you’re first beginning the design of a new website, it’s quite convenient! I’ll show you a couple of ways of achieving this.
Option 1: Meta Tag
Did you know that, with the addition of a single meta tag into your document, you can instruct the browser to automatically reload at a provided interval?
<meta http-equiv="refresh" content="3" />
Placed within the head tag of your document, this meta tag will instruct the browser to refresh every three seconds. Pretty nifty!
You must remove this tag before you launch your site! It should only be used for initial development purposes.
Option 2: TextMate Commands
Those of you who use TextMate, or E-Text-Editor on the PC, may not be taking advantage of commands as much as you should. Did you know that there is a shell script built in to TextMate that will also force the browser to reload as soon as you press the applicable key trigger?
Simply open the “Bundles” menu, and load the bundle editor.
Within the HTML tab, you’ll find a “Refresh Running Browsers” script. Memorize, or change the activation key (in my case, Apple + R), return to your document, and try it out. This is the preferred solution if you use either of these two code editors.
Option 3: XRefresh
A Firefox Add-on, called XRefresh, will monitor your project folder, and, every time it detects a change to the source files, it’ll reload Firefox. This one works great, but requires a bit of work to get up and running.
Option 4: Coda: Lively
Coda users may not be familiar with one of my favorite plugins, called Lively. Like the options above, this allows Coda users to immediately observe the changes they make to their projects in real-time. If you use Coda, this is a must-have.
So what’s your preferred method? Personally, I tend to stick with options two and four. How about you?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
All In One Banner–jQuery R ... only $8.00 
Simplicity - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Despite the fact that I can code pretty well, I never thought of using a refresh while developing.
This is a good tip.
The most practical use for such a script would be to test the URI for your development address. “localhost”. If the URI contains localhost or whatever your development address is, then add
the metatag to the head of the document.
if
(URI == “localhost”)
{
echo ‘ ‘ ;
}
Sorry, didn’t think about the angles disappearing on me.
if
(URI == “localhost”)
{
echo ‘ < meta http-equiv=”refresh” content=”3″ > ‘ ;
}
Cool Suggestions. Never really considered it even possible to auto refresh. Great idea Scott, but what i the webpage had a blog post with a hyperlink similar to this: http://mysite.com/blog/improving-localhost
I think to remain safe its better to improve that line with something like this:
if (URI == “http://localhost/”) {
echo ‘< meta http-equiv=”refresh” content=”3″ > ‘ ;
}
Regular Expressions maybe more effective but I think for this it may not be necessary.
Nice. Thank!
Opera can do this out of the box though.
I used the meta tag, but sometimes I noticed that some browsers stop re-loading the page automatically after a specific time, does anyone have the same trouble?
i get it….thanks for sharing…
Jeffrey – you rock.
A little thinking outside of the box goes a long way, and there’s many applications for this beyond the simple ‘shave a few seconds off your development time.’
I, for one, never used the meta refresh before (never needed to) – and I’ve always been a happy Coda user so I had no idea TextMate had that feature. This was a double win for me, and I’m sure I’m not alone.
Thanks again, Jeffrey! This tip is as valuable as any.
I use the ReloadEvery plugin for Firefox. You can set any tab to reload at practically any interval. Here’s what the developer says about it:
Reloads web pages every so many seconds or minutes. The function is accessible via the context menu (menu you get when you right click on a web page) or via a drop down menu on the reload button
Works with Firefox 1.5 – 4.01b
https://addons.mozilla.org/en-US/firefox/addon/115/
VERY handy
The “refresh running browsers”-way in Textmate works for me only in Safari.
Is there a way to get this working in Firefox?
I’ve also tried to make a new command in the bundle editor using the codesnippet found here: http://bit.ly/d1RvZV
Without any succes..
Anyone?
Cool stuff :) thanks for sharing!
For those of you using Chrome like me here is what you need :D
Chrome Reload:
https://chrome.google.com/extensions/detail/njoipeaphfnaplplihpbgndfojhdhmjo
or
Chrome Refresh:
https://chrome.google.com/extensions/detail/aifhnlnghddfdaccgbbpbhjfkmncekmn
I personally prefer Crhome Reload.
Can’t believe people is actually bashing this article. Maybe it’s not an in-depth tutorial but it’s definitely an useful time saver trick. That said, I work since 2008 with XRefresh and coding using is much faster, as you don’t have to Alt+Tab,Ctrl+R every time. Even more, XRefresh can refresh any IE window and FF at the same time, so you no longer have to go through each window refreshing it. For those interested, there’s a short tutorial about setting XRefresh up and running.
Thanks bkozal and Gigamo for sharing about mockko’s live reload for Chrome and Safari.
Since everybody at Nettuts is awesome!
I was wondering if anybody has set up xrefresh-server on a mac. It simply does not work if I follow the doc/guide at http://xrefresh.binaryage.com/#osx
When running xrefresh-server I get this error:
Since everybody at Nettuts is awesome!
I was wondering if anybody has set up xrefresh-server on a mac. It simply does not work if I follow the doc/guide at http://xrefresh.binaryage.com/#osx
When running xrefresh-server I get this error:
/usr/local/lib/ruby/gems/1.9.1/gems/xrefresh-server-0.3.0/lib/xrefresh-server.rb:9:in `’: uninitialized constant Object::PLATFORM (NameError)
from :29:in `require’
from :29:in `require’
from /usr/local/lib/ruby/gems/1.9.1/gems/xrefresh-server-0.3.0/bin/xrefresh-server:15:in `’
from /usr/local/bin/xrefresh-server:19:in `load’
from /usr/local/bin/xrefresh-server:19:in `’
If someone knows how to fix this it would be amazingly sweet :)
Sorry for adding the comment twice :S
alt+tab then ctrl+r works fine for me. Never really cared to write an AJAX script to ensure that as things are updated (saved) then to update accordingly. BUT, for some people, what they can do is have the website setup on a secondary monitor and as they code they can see it appear right there. It would be useful in that instance and lively is a neat tool :)
Thanks for this. I’ve been trying to find a way to refresh on every change and XRefresh works perfectly. Every save automatically uploads to localhost, and XRefresh automatically refreshes the browser. Now I never have to leave my application even for a second to see the change.
The F5 crowd doesn’t get it; there is another step in between, and if you are running a bunch of apps, then even alt-tab is a drag.
I tried a lot of different queries and your post was the only decent answer I found. Thanks!
Lovely post. While I didn’t use any of the four solutions proposed, it did get me on the path to discovering LiveReload, which is supposed to be XRefresh for Chrome. Thanks!
Thank you! I really appreciate it!
nice overview and interesting possibilities.
For Windows users (notepad++ and visual studio) who cannot rely on such a cool text editor as the one you mac guys can use, check out link.js (http://livejs.com/) via stackoverflow:
http://stackoverflow.com/questions/1346716/firefox-auto-refresh-on-file-change
(And xrefresh now only works with firefox as an addon)