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
Join our newsletter!
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
Okay, nothin for me. Just hit f5 “und gut ist” we say in germany.
Just another idea: What about a Javascript popup with a little interface, a formular with a number of seconds to refresh the parent frame?
Opera has a reload every x seconds/minutes timer built in;
http://www.mobypicture.com/user/rachidfinge/view/5580433/sizes/full
and there is a extension for firefox that copies this functionality;
http://www.makeuseof.com/dir/reloadevery-web-page-auto-refresh/
Silly article. You’ll be giving us advice on how to walk with both feet next.
How is this a silly article? If you’re manually refreshing your browser each time, you’re wasting time.
Not at all … dont you take some deep breath when working so hard? bet u need 2 “refresh” your lung every now and then.
wasting time with hiting f5?;/ goshhhh
Refreshing your browser is not a big deal. You should refresh when you need it, not all the time IMHO.
Pressing F5 or Ctrl+R doesn’t take much time!
Anyway! NO article is silly on Nettuts!
While I accept the need for auto refresh on some projects during their infancy stages of framing the page and getting the style just right. I find that an auto refresh can cause massive headaches when it comes to working on mysql driven pages and crud operations.
I use the ReloadEvery FireFox plugin when I need this functionality. Allows for multiple time setting and warns you if you try to configure it on a page with POSTDATA.
How could this be a silly article? Don’t you think, @Paul, that there could be room for improving the way you walk or the efficiency with which you walk?
Remember, this is part of development, NOT deployment. This can be a very useful tip, particularly when you are making a lot of CSS and Javascript changes. Instead of writing a whole block of code or styles only to find when you are done that there is an error to fix, you will know as you go along. I can think of several times that this little trick could have come in handy in the past. Why I didn’t think to use the meta tag I already knew about is beyond me!
I will definitely be referencing this tip in future projects. Great job as usual, Jeff!
I’ve waisted more time reading this article than I do by hitting F5 to refresh
Paul dont hate, just cuz your not as cool as Jeffrey does not mean you can hate on his articles,
The article isn’t silly, but you are.
It’s simply abstracting away manual labor so you can focus on what really matters: creating and modifying your code.
I was refreshing my browser for years and had I not come up on this article I would have still been dealing with it (and my machine is awfully weak to boot so it annoys me).
Anytime you can automate a process to free your time for more important things, you’re being more productive.
Maybe this article sound silly, but the result was cool, I don’t use F5 again, great job Jeff.
Livereload for Safari and Google Chrome – http://github.com/mockko/livereload
In Opera, simply right click Reload Every > select the interval you want. Done.
Or you could use the built in live preview in coda, textmate or my favorite, espresso
Bit hard to do that i think with PHP application building, unless i am missing something?
actually, you can change the url of the preview to something like http://localhost/project/ and it still does live refresh, but only when the html or css files are changed, not when the php file is, but then if it refreshed every time the php file was changed it would always be a mess of errors
AWESOME Jeffrey! thanks, that’s very useful for me :-)
One big reason I moved from TextMate to Espresso is the ability to live edit CSS files and watch the changes in the html live preview. Very good trick with the meta refresh!
Great tips!!
Super Cool, thanx Jeff
Thanks Jeff. I didnt know E-textEditor have this.
and nice trick on the meta also , I’ll rather use this, than the addon.
Chromereload fo Chrome https://chrome.google.com/extensions/detail/njoipeaphfnaplplihpbgndfojhdhmjo
I love the new LESS.js “watch” feature, explained in this article (at the bottom): http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/
Yeah, me too. I forgot to add that one. I’ll update this posting. :)
I just use the tried and true technique of Shift+F5. Why make something more difficult if you don’t have to?
Nice one Jeffery, always a good effort from you!
I use DW5 so this is never an issue for me anymore, but it used to drive me nuts!
Seems like you’ve missed the best one of them all: http://github.com/mockko/livereload
I’m sure some people may find this useful. As other people have indicated, the tried and true F5 works just fine for me. Just as the other WordPress article suggested manually downloading and installing WordPress is ‘wasting’ time, the question is, how much time?
Just as having an auto-refresh compared to using F5, I would submit the time saved is really minimal.
Jeff, I’ve enjoyed most of your articles and the quick tip ones are a great idea but I think what some people are trying to convey is let them have a bit more substance to them.
Great tip! I’m so tired of the edit -> switch window -> refresh a zillion times a day!
I particularly like the idea of refreshing the browser whenever you Ctrl+S. Does anyone know if there is an option or plugin for Notepad++ or UltraEdit?
Additionally, what happens when you work on remote files (FTP), when it takes a few seconds to save the file? Does anyone have experience on that?
Thanks
This should not work very nice, to get better results with this tip would be nice to use some kind of parameter in the css files or javascripts, like this:
(django code)
the code will return to the browser this:
well html tags are forbidden:
the idea is like this one: http://www.wkoorts.com/wkblog/2009/07/12/css-auto-reload-with-django-templates/
Thanks for the tip! What is that application up in your menu bar (with the scissors icon) that lets you insert a block of code? It looks really useful.
It’s called Snippets.
Thanks! Did not know about the meta… I’ll definitely use that!
Jeffrey, I sometimes wonder weather you say “stay tuned to net.tutsplus for the best tutorials on the web” actually is true anymore. I don’t want to sound harsh, but this isn’t a great tutorial at all, to be honest, this is some kind of insult to everybody who is great at coding.
Why?
Every developer should really know about the html refresh tag; it’s basic and doesn’t take a genius to work out how to do it.
As you say, a big website doesn’t benefit, and if you have 2 tabs open side by side (like you did), what’s the issue in clicking the window are pressing F5, I mean, come on.
I don’t know what too say, seems tutsplus is running out of its once great content, and its half finished series of tutorials aren’t ideal.
I know you have put in a great deal into tutsplus, codecanyon, so please don’t stop doing that, and start listening to members, start asking them what tutorial THEY want to see, so you know, for your own benefit, what you should be aiming on, because tutorials like these make it seem very, very basic, and as another member said above, you are teaching us how to walk on two feet here.
Also, why is it mac based, I find the tutorials very limited sometimes, because obviously Windows doesn’t have some programs, so I’d appreciate it if we could get both mac/windows tutorials.
Jeffrey, you put in such great work, please listen to your fans, because tutorials like these don’t really teach us, I have listened to hours and hours of your tutorials, and they are bloody amazing, and I am beginning to miss your old series. Maybe make a quick survey, but please make this tutorial the last of its kind.
(I do know what your trying to do in this tutorial, you want to make it easier, but I am sure a quick google search can sort the problem out, and most developers should know that pressing F5 takes a few seconds, and won’t cut development time too much – be realistic :P)
Thanks for reading, and please don’t delete this comment (at least read it :) )
Responded to your comment here: http://codecanyon.net/forums/thread/where-has-nettutsplus-gone/29372?page=1#275211
Hey Shadow, I know Jeff already responded, therefore please don’t take my comment as piling on. Just a friendly heads up =)
As one dev to another, I would highly recommend giving some of these techniques a shot. Your statement “and most developers should know that pressing F5 takes a few seconds, and won’t cut development time too much” isn’t true in my experience. Personally, I’ve saved a TON of time with auto-refreshing apps.
But more important than just dev time, I think these techniques actually make it easier for a designer to reach a state of “flow”, i.e. where s/he is “in the zone.” Two important components of flow are:
1. Concentration
2. Direct and Immediate Feedback
In my opinion, going back and forth between browser and editor hinders concentration. Second, manual refreshing does not provide immediate Feedback, even if you have to wait only a few seconds.
Anyhow, this is getting long =) Please just consider “flow” when you’re thinking about making the most of your day! Grooving to a good song, hangin in your editor, getting instant feedback, and pluggin right along is so much cooler than: Saving. Switch to Browser. Refresh. Seeing something wrong. Going back to editor. Correcting. Back to browser. Refreshing. Ok it’s right now.
Trust me. I totally rule, just ask my Mom =P
Is the time saved REALLY worth it? I mean, seriously, do you save enough time out of your schedule with this tactic to actually achieve some other goal? I mean, I hit Alt+Tab > F5 as fast as the auto refresh could do it.
Considering some of the methods you show actually require configuration means you’re wasting more time by doing that then you are by just refreshing the page manually!
If you’re whining about adding a single like of code to your headers you shouldn’t be developing.
was a practical and very “lazy” way to get the job done without doing much of anything.
Thank you Jeffrey for the trick with meta refresh. However, the refresh is not equivalent to pressing F5, because changes in css files for example won’t affect the view…
Great tut thanks men.
OK, this article is very interesting if you have a portal, or any kind of website with a constant update flow. That should be great for that. But if it’s a simple website, nothing like a F5 would solve the problem… Unless you really want to use it! ; )
But use it while developing… uhn, dunno if it’s good, but… yeah, it could be great, hehe! It depends how the developer wants to work, you know, everyone has your own way of working!
Oh, thanks for this post, really cool!
I’ve been using XRefresh for a while and I really love it. Most of the time, I am currently involved in building CodeIgniter sites. I set up XRefresh to monitor my views folders and my CSS folder.
I have a code editor on one screen and Firefox on the second one. When I want to preview results, I simply hit save and voilla, the page is instantly updated.
One great thing about XRefresh, which many of the commenters above may ignore, is that it actually does not make a full page refresh when it detects any changes in the css. It just updates the styling. Very helpful when full refresh could cause some unwanted changes in the database.
XRefresh gives me the freedom to quickly try new things – think Firebug on steroids (because I don’t have to switch to a code editor to actually make changes tested in Firebug).
Helpful article. I know of some sites where pages (e.g. a “who’s online” page in vB) will use an auto-refresh on a live page; good to know how it’s done.
if you already know it all when it comes to auto-refresh, the title alone should be enough to keep you from wasting too much of your precious time and intellect on the article. ;)
I was actually just looking for this exact thing the other day! These tools can be extremely helpful. Though, the best solution by far is Espresso’s built-in auto refresher. It’s amazing and I use it everyday!
I would say real devil is IE cause even you hit browser cache button or clear cache via developer toolbar. It won’t clear cache so you need to manually delete all data.
So any solution for IE?
Hey Jer Thanks for this wonderful quicky.. @Paul you are stupid.
@Nehal while developing i often use Ctrl+F5 it refresh page with new content including css and js Hope this helps you :)
for css reload i use below java script as bookmark only i have to click on bookmark and my css file reloads. its very helpful I dont need to reload all other stuff.
javascript:void(function(){var%20i,a,s;a=document.getElementsByTagName(‘link’);for(i=0;i=0&&s.href)%20{var%20h=s.href.replace(/(&|%5C?)forceReload=\d+/,”);s.href=h+(h.indexOf(‘?’)>=0?’&’:'?’)+’forceReload=’+(new%20Date().valueOf())}}})();
I dont know comment box would publish this script
Big big thanks for telling about new meta tag. Awesome feature. It would be even better if you could tell where it is possible to read about all the new features of html.
Thanks again.
wow nice quick-tip, didn’t know that (but I’m just on mac) :D thanks a lot
I find I do a lot of development by using firebug (firefox plugin) to tweak the layout pixel-by-pixel. A timed refresh would negate all the changes made within firebug. Just a thought.
I just tried XRefresh, seems there’s a bug for windows users where CSS and JS paths are not escaped properly so it just doesn’t work. I read a support thread about it and the creator doesn’t seem at all interested in fixing it. I’ll stick with F5
This would come in extra handy when I have 8 browser open testing for cross browser compatibility.
If using server-side code, adding a timestamp arg to the src/href attribute does the trick for me:
PHP:
<script src="/path/to/js/file.js?ts=” type=”text/javascript”>
<link href="/path/to/css/file.css?ts=”…
you get the idea
Been using Textmate for a while and just never thought of doing this. Great tip. Thanks Jeff
Jeff provides great content. Period. With that said, for quick tips as simplistic as this one, I would feel better if tuts+ was releasing like 5 per day instead of one every couple of days. Relatively speaking, tuts+ has very few tutorials and quick tips on a weekly basis so I’d much rather have a bit more substance in the tutorials.
Now, if tuts+ starts releasing a bunch of these little quick tips every day, then sure, pile on all the little stuff.
First one is really nifty.
First one is really nifty; loved it. But, These are not only used during designing; we can use them on live broadcasting websites.
I used this once, for a list of object I needed to sign up:
function reloadIt()
{
frm=document.getElementsByName(“grafiek”)[0];
frm.src=frm.src;
setTimeout(“reloadIt()”,600000); // 10 mins
}
setTimeout(“reloadIt()”,60000); // Init : 1 minute
I used this once, for a list of object I needed to sign up:
Update, the code got screwed up in my previous post. I’ve copy pasted it here: http://pastebin.com/202G8w7b
Hitting F5 on FireFox, doesn’t help me. Many times I’ve been wondering what,s wrong in my code, that the things I want to change, doesn’t change. In the end I have to clear the history and it’s just than it works.
I’m sure some of those methods will be solution for me, just starting to test them.
Thanks very much for the article (*:
REALLY like the first one, but do any of these address cache issues? I don’t think so. I find that to be my biggest problem when developing. If there was a simple way to clear cache and refresh, then I’d be SUPER excited!
very well
i think that the first one is very good for my work, until i finish press Ctrl+S and Alt+Tab to the browser the page will refresh his self
very well
Opera has the built-in ability to auto-refresh at a given interval.
In Emacs: C-c C-s
Whenever you save an .html file, it is loaded in the default browser.
I didn’t know the F5 would refresh my IE8 browser. I’m still learning. Good Article.