Try Tuts+ Premium, Get Cash Back!
Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites
videos

Quick Tip: 4 Ways to Auto-Refresh your Browser when Designing new Sites

on Jul 27th 2010 with 93 comments
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.

Premium Members: Download this Video ( Must be logged in)
Prefer to watch this video on Screenr?

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.

TextMate 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

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Scott

    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 ‘ ‘ ;

    }

  • Scott

    Sorry, didn’t think about the angles disappearing on me.

    if
    (URI == “localhost”)
    {
    echo ‘ &#60 meta http-equiv=”refresh” content=”3″ &#62 ‘ ;

    }

    • http://www.graphicbeacon.com graphicbeacon

      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 ‘&#60 meta http-equiv=”refresh” content=”3″ &#62 ‘ ;
      }

      Regular Expressions maybe more effective but I think for this it may not be necessary.

  • Tuan

    Nice. Thank!

  • Awesan

    Opera can do this out of the box though.

  • http://www.facebook.com/MohamedZarhan Mohamed Zahran

    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?

  • http://www.weebernet.com Penang Web Design

    i get it….thanks for sharing…

  • Shaun C.

    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.

  • http://twitter.com/Digital_Misfit Digital_Misfit

    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

  • Ilias

    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?

  • http://bluzgraphics.com Paz Aricha

    Cool stuff :) thanks for sharing!

  • Seven

    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.

  • http://ilovecolors.com.ar Elio

    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.

  • Martin Sjåstad

    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:

  • Martin Sjåstad

    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 :)

  • Martin Sjåstad

    Sorry for adding the comment twice :S

  • mark

    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 :)

  • badfun

    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!

  • http://ezuk.org Ezuk

    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!

  • Max

    Thank you! I really appreciate it!

  • http://www.teamaton.com andrej

    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)

    • http://www.facebook.com/agep.rumanto Agep Rumanto

      You ROCK man.. even I don’t know whether there is a javacsript outhere.. this is a light-weight solution without installing any heavy and complicated application.. why I just found you a minute ago, you commented a year ago.. shame on me..Thanks in a million….:)

  • http://www.facebook.com/nico.belazaras Nicolás Belazaras

    OMFG, Lively is freaking cool!

  • Craig Hopgood

    Another fantastic way to accomplish is by using QuickKeys. I absolutely love this tool and use it in so many ways. http://startly.com/products/quickeys/mac/4/

  • Danj

    I recommend this for Windows users. Really handy tool for web designers. http://codecanyon.net/item/auto-refresh-browser/4566391

← Older Comments