New
Play QuickTime version 
Play Flash version 
Watch
Watch Debuggers screencast (Alternative flash version)
QuickTime version is approximately 100Mb, flash version is streaming.
View the demo used in the screencast
Logging to Debuggers
It’s not mentioned in the screencast anywhere, but if your code includes the code console.log('my message') it will appear in the console area of each of the debuggers.
Firefox’s Firebug
All Big Five browsers have their own best tools for debugging. Firefox is the only browser that now doesn’t ship with a debugger by default, but Firebug is still the best choice for debugging so we’ll go ahead and install that.
Before you install Firebug, I strongly recommend you set up a separate development profile by following the directions on mozillazine.org on how to create new profiles. This profile will be dedicated to web development and shouldn’t include your normal digest of Firefox extensions. This ensures nothing interferes with Firebug’s set up.
Once firebug is installed, you need to manually enable the console tab, and you may chose to enable the multiline console editor – which makes it easier to paste larger blocks of code in Firebug – this is really useful for testing chunks of code.
Using a jQuery command directly in the console, like jQuery.fn.jquery or $.fn.jquery we can check the version of jQuery installed – or ascertain if jQuery is installed at all.
From Firebug we can inspect individual elements by rolling the mouse over them and seeing where the highlight in the current page. I usually poke around the DOM tab (from the main HTML tab), this will expose information like href and hash which are useful to manipulate in jQuery.
FireQuery
Once Firebug is in place, I recommend checking out the FireQuery extension for Firebug. This gives you a load more jQuery specific information, such as which elements have events bound to them and you can even click on the individual bound events to link through to the JavaScript that will run on that particular event (in your code, rather than jQuery).
Very useful indeed.
Safari & Chrome’s Web Inspector
You need to manually enable the web inspectors in Safari and Chrome, but it’s very easy:
- Safari: open the preferences, check the “Show Develop menu in the menu bar” item
- Chrome: open the preferences, check the “Show Page and Tools menus” item
Now on the Mac, you can hit cmd+shift+i to open the inspector. From here you can inspect elements, modify styles, test code in the console, and inspect resources being requested, such as Ajax requests.
Inside of click handlers, I prefer to use event.preventDefault() at the top of my function, instead of return false at the bottom, to avoid any confusion if there’s a JavaScript error and the browser is following the link.
Opera’s Dragonfly
Opera, like Chrome, comes with it’s own built in debugger. It’s initial state is a little tricky to start with, but once you familiarise yourself with it, you’ll be able to test blocks of JavaScript and jQuery. Again, as per Chrome & Safari, on the Mac, the key command is the same: cmd+shift+i (feel free to leave a comment if you know what it is on Window).
IE’s Developer Tools
Finally we have IE, which has a varying range of developer tools. The original developer tools (for IE6 & IE7) is pretty basic, but IE8 and in particular IE9 (for preview 3) are looking very good (though my apologies from the screencast – I’m not completely familiar with all the IE8 developer tool features so it goes a little awry!).
Make the Debuggers Your New Home
You need to be as familiar with these development tools as you are with editing CSS on the fly in the browser. It’s important to know how to check whether an Ajax request is failing or not, and where to go when you’re testing a block of code, rather than toing and froing back and forth with uploading code to servers, just to test a new bit of code – it’s a perfect candidate for being tested in the console.
You should follow me on Twitter here I tweet about jQuery amongst the usual tweet-splurges!
Related screencasts
Demo
If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>DOM navigation</title>
<style>
body { font-family: 'helvetica neue', arial, helvetica; width: 500px; margin: 40px auto;}
.note { font-size: 80%; }
#bio { display: none; }
</style>
</head>
<body>
<h1>What Remy does</h1>
<div id="container">
<div>
<h2>jQuery</h2>
<p>It loves the lazy developer - lazy in the good way, I'd rather spend time on the interesting stuff rather than donkey DOM scripting.</p>
<p>Most of my jQuery stuff can be see on <a href="http://jqueryfordesigners.com/" title="jQuery for Designers - Tutorials and screencasts">jQuery for Designers</a></p>
<p>Some extra stuff: <a class="reveal" href="#bio">Remy's bio</a></p>
</div>
<div>
<h2>JavaScript</h2>
<p>JavaScript doesn't required a compiler or anything special to write the code, back when you had a browser to run your code or you could download PSION or Palm's SDK over a 9k modem, you'll understand why I lost patience!</p>
<p>This is definitely my passion and has been since the mid 90s, and certainlys explains how I got in to jQuery.</p>
<p>I do lots of things with JavaScript, along with workshops, I do <a href="http://remysharp.com/talks#dev">talks</a>, run <a title="A front end developer conference in Brighton" href="http://full-frontal.org">a conference</a> and <a title="A collection of my hacks" href="http://remysharp.com/twitter">hacking <em>twitter</em> apps</a> amongst other things.</p>
</div>
<div>
<h2>Remy</h2>
<ul>
<li>Was born once</li>
<li>...or twice?</li>
</ul>
</div>
<div>
<h2>HTML5</h2>
<p>It's new and shiny and it's so damn packed with <a href="http://dev.w3.org/html5/spec/spec.html">JavaScript APIs</a> I couldn't help myself.</p>
<p>I've also written a book called <a href="http://introducinghtml5.com/" title="Introducing HTML5: Bruce Lawson and Remy Sharp">Introducing HTML5</a> with <a href="http://brucelawson.co.uk/" title="Bruce Lawson’s personal site">Bruce Lawson</a> available in late July.</p>
</div>
<div>
<h2>Writing</h2>
<p>Articles, books, blog posts, first about jQuery, but eventually my topics grew - actually I'm probably doing more writing than I expected to do after I failed English at GCSE.</p>
</div>
<div>
<h2>A few pictures</h2>
<p>Here be a link to fire off an Ajax request for some pictures: <a href="pics.json" id="getpics">get pictures</a></p>
</div>
</div>
<script src="jquery-1.4.2.min.js"></script>
<script>
$('#getpics').click(function (event) {
event.preventDefault();
var link = this;
$.ajax({
url: this.href,
dataType: 'json',
success: function (pictures) {
var html = [];
$.each(pictures, function (i, url) {
html.push('<img width="100" src="images/' + url + '" />');
});
$(link).closest('div').append(html.join(''));
}
});
return false;
});
</script>
</body>
</html>
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D83452157.-%3B)
xiani On 7th July 2010 at 11:07
For IE debugging (which, lets face it, is going to be most of it & the worst) I use a combination of these 2 tools:
http://www.debugbar.com/
http://www.my-debugbar.com/wiki/CompanionJS/HomePage
Not quite as good as Firebug, but at least gives you a chance to figure out what’s going on.
Christian On 7th July 2010 at 13:07
under Windows press crtl+shift+i to open Opera’s Dragonfly
Joel Boonstra On 7th July 2010 at 15:07
I realize it’s not as featureful as full-blown Firebug, but Firebug Lite has proven really useful to me (especially recent versions) in doing IE7 debugging; the IE7 developer toolbar is kind of a pain sometimes, and having Firebug Lite gives a somewhat more familiar environment to do some quick debugging.
Jacob On 7th July 2010 at 15:07
To toggle Firebug on the mac side, use fn+control+f12.
To toggle the IE dev tools in VMWare, you have to disable keyboard preferences for the f1-f12 keys. That’s too annoying.
Thanks for the screencast. I’ve used Firebug a lot, but I definitely learned a thing or two from your video.
Vineel Kumar Reddy Kovvuri On 7th July 2010 at 15:07
Excellent treatment of debugging tools…….very nice….. thanks for sharing….
patrick h. lauke On 7th July 2010 at 15:07
“feel free to leave a comment if you know what it is on Window”
Opera Dragonfly on Windows: ctrl+shift+i
patrick h. lauke On 7th July 2010 at 15:07
(ah, sorry, didn’t actually see that you already had comments on this…your comment counter right at the top feels a bit disjointed from the comment box right at the bottom here, btw)
Yosy On 7th July 2010 at 16:07
Hey Remy, For debugging in Internet Explorer (6-8) You can use Firebug Lite,You can use this tool in chrome and opera too. http://getfirebug.com/firebuglite
Thank you for this great tutorial ^_^
"Cowboy" Ben Alman On 7th July 2010 at 18:07
I’ve got to recommend JavaScript Debug which provides a simple wrapper for the console’s logging methods, and was created to allow a very lightweight, easy-to-use, cross-browser logging solution that doesn’t require excessive or unwieldy object detection.
To make a long story short, you can log as much as you want (even in a production environment), and no errors will be thrown if the console doesn’t exist. In addition, there’s a convenient bookmarklet which adds integrated Firebug lite compatibility!
Check it out: http://benalman.com/projects/javascript-debug-console-log/
Miles On 7th July 2010 at 23:07
Commands t bring up the “inspector” on Safari/Chrom/Opera for windows are cntrl+shift+i
patrick h. lauke On 8th July 2010 at 01:07
By the way, the bit that you were looking for and struggling (around the 32:00 mark): to say which tab (debug context) you want to look at in Opera Dragonfly, click the Dragonfly icon (next to the close / undock buttons). The other dropdown you were looking at initially shows you the page you’re working in, plus any related iframes etc that might be in there. If you undock it, the distinction actually becomes clearer.
Torstein Krause Johansen On 8th July 2010 at 07:07
Thanks for the write-up. Ten years ago JavaScript debuggers were scarce (Denkamn being the only credible one) and debugging JS was a hit-and-run, inserting document.writeln-s all over the place.
Thus, it’s wonderful to see that debuggers are getting so much better, making JS a usable platform for client side code development.
ChinaEric On 8th July 2010 at 10:07
thx for your tutoril , i can’t 100% understand english but I can suggest almost all that you want to teach me. wahthing severial of your teaching tv, i begin to imitate your coding style.
i’m very happy for leaning tech, i use some effect in my job like this: http://2010.tudou.com/cehua09
I just want to told you your tutoril have helped me already. make value for me so … i want to say thx again!
KStuart On 8th July 2010 at 14:07
Thanks, nice to see how the main browsers are progressing in this area.
On the OS X side I find it’s easier in most cases to use the open command instead of navigating the application bundles, a couple of aliases can be pretty convenient as well, eg:
alias ffprofiles=’open -n -a firefox –args -P’
alias ffdev=’open -n -a firefox –args -P Developer’
For the terminally averse ;) you can create scripts with the .command extension and drop them into the right side of the dock, or go all upmarket and create bundles for the scripts, give them suitable icons, and drop them in the left side of the dock with all the other first class citizens ;)
simone On 10th July 2010 at 09:07
Hi, in your screencast you show how to use the console. You never ever happen to use the debugger. In fact you use the word “debugger” when you talk about “console” many times.
Personally I use chrome’s debugger, which is really nice: you can put breakpoints in any line of the code, proceed step by step through instructions, change the variables content at runtime, etc.
To give it a try just go to “Scripts” tab in chrome tools, enable “Debug” checkbox, double click on a line number (set a breakpoint) and refresh.
corban baxter On 12th July 2010 at 02:07
I really enjoyed the screencast thanks for the quick overview of all the browsers. I’m not sure there is a point to touch any browser besides firefox for now. hopefully chrome will catch up with its plugins soon.
Tony Miller On 14th July 2010 at 18:07
Greetings, Remy! Thanks so much for these tips and techniques. I hadn’t kept up with FireQuery and its new features, and I’ve recently started doing additional testing on Safari so all that information was quite welcome. Just one question about the iTunes feed – I subscribed and the video won’t sync to my iPod Touch (2nd gen). iTunes (the app) just says it won’t sync the content because it’s not playable on the iPod. Naturally my (Windows) machine has no trouble playing the video.
Is there a different feed I should use, or something I’m missing? Your earlier entries in J4D would play on the device.
If you want to just Tweet me, I’m @lightningwhelk
Rich On 15th July 2010 at 19:07
Remy, I believe you meant to say “alt/option + cmd + i” opens the inspector on Safari and Chrome and not “shift + cmd + i”. “shift + cmd + i” opens Mail with a hyperlink to the page you’re on, which is still pretty useful.
silvers On 17th July 2010 at 03:07
Hi, i was looking for some cool jquery sliders and stuff and came across your site. I love the fact that you do screencasts cos i find learning from them so much easier.
Randomly i was also looking for a way of debugging in IE as well as i love Firebug. This looks like a really cool website. I notice you are from Brighton as well, which is an awesome place. I used to go there back in uni days.
keep up the good work dude. I have bookmarked this site.
Tony On 20th July 2010 at 07:07
I want to make love to Firebug!!!
Sten Hougaard On 6th August 2010 at 09:08
Hi Remy, You did a great job! I would suggest though to cut the length of your “lesson” down to 30 minutes. Regarding the MSIE debugger, it has a minify button which will bring it down to the bottom of the browser in the same way as Firebug in Firefox.
Pavlicko On 10th August 2010 at 19:08
Remy,
This tutorial came to me at the perfect time. While I often use firebug for css, trying to figure out how to use it for jQuery wasn’t quite as clear. This video completely cleared things up for me – love all your other tutorials as well. Keep it up!
Liunian On 11th August 2010 at 06:08
key command for opera’s dragonfly on windows is “ctrl + shift + i”
Stuart On 11th August 2010 at 19:08
Hey, to open web inspector in Safari I need to hit Option – Command – i, not Command – Shift – i as you say. Just FYI.
Frank On 7th October 2010 at 16:10
Excellent tutorial. I just downloaded and installed FireQuery… Thanks for the tips!