Firebug Tutorial – Script Tab : Javascript Debugging 53

Firebug Tutorial

Section 3: Script Tab : Javascript Debugging

I’m going to show you how to debug the Javascript code with Firebug in this tutorial. If you are an Ajax developer, the tutorial will help you in many ways to boost your production in your RIA (Rich Internet Application) development.

The following topics will be covered in this tutorial.

  1. Overview of Script Tab
  2. Debugging Javascript with Firebug
  3. Javascript File Selector
  4. Conditional breakpoint
  5. Using Commandline API while debugging
  6. debug(fn) and undebug(fu) <CommandLine API>

Download : Sample File

Note : Please refresh your web page if something goes wrong in Firebug console while you are debugging. As I’m using Firebug for my web project over 1 year, I know that this tool is very useful too. However, there are a few issues and limitations with this tool. So, please don’t mind about that. If you found any bug, you can report here. OR, you can search the existing issue in issue list.

#1. Overview of Script Tab

The Script tab is the fourth tab of Firebug that allows you to debug the Javascript code on the browser. There are two subpanels in script panel. The panel on the left is the Javascript editor for debugging the javascript code. The subpanel on the right includes two sub panels called “Watch” and “breakpoint”. Please take a look the picture and description in below for more details.

Firebug - Script Tab

  1. JS Editor : This is the Javascript editor where you can debug the Javascript. There is one option called “Break on All Errors” in this editor. If you check this option, the script exection will be paused if the errors occurs in your script.
  2. JS File Selector : If you click on it, you will see the list of all Javascript files that are included in your page. (Please check “#3. Javascript File Selector” section for more details.)
  3. Line of Code & breakpoint : This is a place where you can set the breakpoint for debugging.
  4. Watch Window: It displays the value of variables as a list in that window. If you have some experiences in using Microsoft Visual Studio, you already have some idea about how to use Watch window. There is only one difference between the Watch window from Firebug and the one from Visual Studio. In Visual Studio, the “Watch” window displays the value of selected variables. But the “Watch” window of Firebug will display all values of variables within the current scope.
  5. list of breakpoints : The list of breakpoints that you set in Javascript Editor will be shown in that panel. You can also remove all breakpoints from that panel.

#2. Debugging Javascript with Firebug

Debugging javascript is very straightforward process with Mozilla Firefox and Firebug. If you are Visual Studio developer then you won’t feel any differences while you are debugging the Javascript code with Firebug excepts the debugger runs as the part of browser. Let’s follow the steps to take a look how to debug the JS code.

Steps to debug Javascript with Firebug

  • Copy the code below and paste them in notepad and save as a htm file. ( or If you already downloaded the sourcecode of this article, you can find the html file called JS-Example1.htm in zip file. )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Javascript Debugging with Firebug</title>
<script type="text/javascript">
function doSomething(){
var lbl = document.getElementById('messageLabel');
lbl.innerHTML = "I just did something.";
}
</script>

</head>
<body>
<div>
<div id="messageLabel"></div>
<input type="button" value="Click Me!" onclick="doSomething();" />
</div>
</body>
</html>

Example 1.0

  • Open your HTML file in Firefox browser.
  • Launch the Firebug console and go to “Script” tab.
  • Set the breakpoint on line 7 (as shown in pic below)

    breakpoint-on-fb.jpg

  • Take a look at “Breakpoint” window at the right panel. (One line is added in “Breakpoints” windows as shown in pic.)

    breakpoint-window.jpg

  • Click “Click Me!” button on your page. (The Javascript execution will stop at the breakpoint that you set on line 7. )

    break-on-line.jpg

  • You can step thought the code by using one of those buttons (Continue, Step Over, Step Into and Step Out ) on the toolbar of Firebug.

    step-out.jpg
    (From left to right)

    • Continue (F8) : allow you to resume the script execution once it has been stopped via breakpoint
    • Step Over (F10) : allow you to step over the function call.
    • Step Into (F11) : allow you to step into the body of the another function.
    • Step Out : allow you to resume the script execution and will stop at next breakpoint.
  • So, click “Step Over” icon to go to the next line (line 8). (then, please take a look at “Watch” window. The values of variable called “lbl” will be displayed on “Watch” window. )

    watch-window.jpg

  • then, Click “Step Over” icon to go to the next line. As there is no next line in our script, the execution will be stopped.

Yeah. That’s all about simple Javascript debugging with Firebug. I will explain about more advanced features such as “using conditional breakpoint” and “using commandline API while debugging” in next example.

Note about “Watch”window : Even though the value of the most variables are shown in “Watch” window, there might be some cases that you can’t find the variable you want in “Watch” window. In that case, the Commandline API are very helpful for you.

#3. Javascript File Selector

Using firebug console, you can easily find out how many script files are included in your page. (Please check-out the picture below. ) And also, you can change the script file that you wanna to debug.


#4. Conditional breakpoint

The conditional breakpoint is very helpful when you don’t want to debug line-by-line. For example, there is one for-loop that loops 50 times in your code. If you set the normal breakpoint, the execution will be paused each time you enter in that loop. But if you are using conditional breakpoint, you can put the condition on your breakpoint so that the script execution won’t be paused every time you enter in that loop.

In order to show you how to use the conditional breakpoint, I will change the Javascript code as below from the previous example (e.g: 1.0). (If you already downloaded the sourcecode of this tutorial, please take a look the html file called “JS-Example2.htm” in zip file.)

function Dwarf(name){
this.Name = name;
}

function DwarfFactory(){
var dwarfs = new Array();

this.AddDwarfs = function(){
dwarfs[0] = new Dwarf('Bashful');
dwarfs[1] = new Dwarf('Doc');
dwarfs[2] = new Dwarf('Dopey');
dwarfs[3] = new Dwarf('Grumpy');
dwarfs[4] = new Dwarf('Happy');
dwarfs[5] = new Dwarf('Sleepy');
dwarfs[6] = new Dwarf('Sneezy');
}

this.ShowDwarfs = function(){
for(var idx in dwarfs){
console.log(dwarfs[idx].Name);
}
}

this.ToString = function(){
var names = '';
for(var idx in dwarfs){
names += dwarfs[idx].Name + ' ';
}
return names;  //dwarfs.join(' ');
}
}

function doSomething(){
var objDwarfFactory = new DwarfFactory();
objDwarfFactory.AddDwarfs();
objDwarfFactory.ShowDwarfs();

var lbl = document.getElementById('messageLabel');
lbl.innerHTML = objDwarfFactory.ToString();
}

Example : 1.1

In our example, there is one for-loop in “ShowDwarfs()” function. We will set the conditional breatpoint in that loop. We wanna pause the script execution only when the name of dwarfs object is “Happy”. So, right-click on Javascript editor and put the condition “dwarfs[idx].Name == ‘Happy’” in the properties of breakpoint as shown in screenshot below. Then, press “Enter” key.

conditional-breakpoint.jpg

then, click the button on your webpage. The script execution will be paused when the condition that we put is true. We can also use the commandline API while debugging.

#5. Using Commandline API while debugging

If you have no idea about Firebug’s commandline API, I suggest you to read this tutorial first. Like we used to use “Immediate” window while we are debugging the code in Visual Studio, you can use Console panel with Commandline APIs while debugging Javascript with Firebug.

Let’s continue the previous example. The execution is paused when the condition is true. Then, you can go to Console panel and type any commandline API to find out more about current dwarf object. Let’s say we typed “console.dir(dwarfs[idx])” in one-line commandline. then, You will get the result “Name “Happy”" in console panel as pic below.

consoledir-debug.gif

#6. Using debug(fn) and undebug(fu) API

As I said in my Commandline API article, I will explain about debug() and undebug() API here.

#11. debug(fn) and undebug(fu)
Adds or removes a breakpoint on the first line of a function.
Note: I’m not going to cover about this API in this tutorial. Please read more about this in next section.

Basically, debug(fn) and undebug(fn) APIs allows you to set/remove the breakpoint based on the function name from commandline or Javascript code instead of setting the breakpoint in script panel.

Example

  • Open the “JS-Example2.htm” from zip file
  • Remove all breakpoints that you set earlier. (Script panel>Breakpoint panel>Options>Remove all breakpoints)
  • Go to the Console panel.
  • Type “debug(doSomething)”
  • then, click “Click Me!” button. (Observe: The script execution will be paused at the first line of doSomething() function. )
  • If you want to remove the breakpoint that you set, type “undebug(doSomething)” in commandline.

So, keep in mind that there are three ways to set the breakpoint in Firebug.

  1. Static Breakpoint : It can be set based on line number. You need to set this kinda breakpoint by clicking the line of code bar in Script panel.
  2. Conditional breakpoint : It can be set based on the condition. You need to set this kinda breakpoint by clicking the line of code bar in Script panel.
  3. Dynamic breakpoint : It can be set based on the name of Javascript function. You can set this from commandline or Javascript code by using debug(fn) and undebug(fn).

If you wanna try to debug Ajax application, there is one sample file called AjaxExample folder. So, feel free to try debugging this sample if you want.

Okay. that is all about debugging Javascript with Firebug. I hope you will help it useful. Sorry for taking so long to post this tutorial because there are a lot of problems in my country (Myanmar) so I have no mood to blog. :( Anyway, I have tried to cover as much as I can in this tutorial. Feel free to let me know if you have any comment or suggestion. Thanks for reading..

53 thoughts on “Firebug Tutorial – Script Tab : Javascript Debugging

  1. Pingback: links for 2007-10-02 « Simply… A User

  2. Reply Jason Grunstra Oct 2,2007 6:37 pm

    Thank you very much for this tutorial. I learned a great deal about some of the powerful features in Firebug. Hope to see more like this one in the future.

  3. Reply Myo Kyaw Htun Oct 3,2007 9:28 am

    Thanks for write up.

    Mike, I think you should collect all of links and summarize in one post when you’ve finished fire bugs tutorials. I’m ready for digging, del.icio.using and stumbling.

    there are a lot of problems in my country (Myanmar) so I have no mood to blog.

    Me too :(

  4. Reply Michael Sync Oct 4,2007 3:11 am

    Hi MKH,

    Yeah. I haven’t finished the series yet. I need to add two more posts for that series. I hope its gonna finish this weekend..

  5. Reply Kymberly Oct 4,2007 3:54 pm

    Hi,
    I am trying to learn to use firebug. I know nothing at all about it. I have read your tutorial and as I do not understand firebug at all the tutorial did not cover what I think I need. Sorry. It is only because I don’t know what it is.
    I wonder, if there is a ‘mistake’ in the javascript code, how do you use firebug to fix it? Is this what it does or do you have to fix the bug your self once firebug has pointed it out?

    I am really confused. I have been given some code to check and see if I can fix it in firebug and I can not. I am not good at it.

    Sorry you have worries in your country at the moment. I hope things get better.

  6. Reply Michael Sync Oct 5,2007 1:43 am

    Hi Kymberly,

    I will add one more sample code and explanation in this tutorial… Thanks for your comment..

  7. Pingback: Michael Sync » Firebug Tutorial : Section 4 - Net, CSS and DOM tabs

  8. Reply Bhaarat Nov 13,2007 10:13 am

    there is a correction required. “…put the condition “dwrfs[idx].Name == ‘Happy’” ” Should be changed to dwarfs rather than dwrfs. Thanks

  9. Reply Michael Sync Nov 13,2007 7:23 pm

    Thanks a lot, Bhaarat.. I have changed it..

  10. Reply TravisO Nov 30,2007 3:11 pm

    This is a great tutorial, so much that the Firebug team should adopt it officially and host it. You kept it the perfect length (more is less) and provided great screen shots. I haven’t seen such a cleanly executed tutorial in years.

  11. Reply ScottR Dec 8,2007 10:57 am

    I could not have asked for a better Firebug tutorial! The information and techniques I learned will definitely help save time in my AJAX development. Nicely done! Thanks

  12. Reply Edward R. Joell Feb 19,2008 10:58 am

    One issue that I see in this tutorial is what to do when things do not work as described. In trying to step trhough my java script code Firebug ignores all the breakpoints and flashes a very quick message saying firebug is disabled then proceeds to the next page. Yet the menu entry specifically states that firebug is enabled. This is not even the way the problematic page works in firefox.

  13. Reply Michael Sync Feb 19,2008 5:41 pm

    Can you give me the link of the page that you are not able to debug? or you can send me the page that you are having the problem…

    I have been using it for long time and I don’t have that problem. Not only me. There are a lot of web developers who are really happy with firebug.

  14. Reply William Mitchell Mar 25,2008 12:30 am

    I see the exact same behavior that’s described by Edward R. Joell above.

    I’ve parked a trivial script at http://u-lazy-u.com/fbtest.htm. Here it is:

    debugger;
    alert(“Hello!”);
    </script

    With Script selected in Firebug 1.05 I can see fbtest.htm and set a breakpoint on the alert call. (Note the ‘debugger;’ above that, too!)

    If I refresh with the toolbar button I see the Firebug portion of the window overlaid for an instant with “Firebug is disabled. This page cannot be displayed.” Then I see the alert pop-up.

    If I click in the script code then Edit>Select All, look what I get on the clipboard — there’s that “Firebug is disabled” text but that text is not visible on the screen when I hit Select All!

    —–
    Firebug is disabled

    This page can not be displayed.
    1
    2
    3
    4
    5 debugger;
    6 alert(“Hello!”);
    7 </script
    8
    9
    10
    —-

    I see the same behavior when loading fbtest.htm as local file — file:///c:/y/gcs/fbtest.htm.

    One more thing: if I follow the directions in http://www.litfuel.net/pics/Firebug_AJAX_small.mov, the breakpoint example works.

  15. Reply William Mitchell Mar 25,2008 1:56 am

    p.s.
    ‘Sorry about the mangled HTML above. You can find the code at http://u-lazy-u.com/fbtest.htm

  16. Pingback: Everything about Firebug - 21 22 Great Resources » Blog at veanndesign.com

  17. Pingback: Object Oriented JavaScript « Christopher Grant

  18. Reply fil Sep 30,2008 8:41 am

    Thats all nice.

    But what about all the JS that runs on page load, how do I debug that?
    It seems Firebug disables all my breakpoints on reload. However I can’t see any other option to (re)start JS execution.

    g.

  19. Pingback: Robin’s Blog» Blog Archive » Using Firebug to Debug Code

  20. Reply Bob Dec 30,2008 10:31 am

    This was exactly what I needed to get started.

    Thanks

  21. Reply Dee Jan 9,2009 10:50 am

    “conditional breakpoint” example of step 4 does not add anything to the code and isn’t working in the latest version of firebug this date.

    The blue window pops up, the condition is entered, but console.log(stuff) does not appear…

    Any suggestions ?

  22. Reply cnc guy Feb 12,2009 1:58 pm

    how do you edit javascript like you can edit html and css

  23. Reply Cyg07 Mar 9,2009 6:17 pm

    That’s nice!
    thx!

  24. Reply Sridhar K N Mar 23,2009 1:39 am

    Nice tutorial dude. Thanks

  25. Reply Arne Steinarson Mar 27,2009 1:56 pm

    Thanks you for an informative tutorial. Just what I needed to get up to speed on FireBug.

  26. Reply karatedog May 28,2009 2:28 am

    Nice tutorial,however I couldn’t find any topic about finding a javascript function that is loaded from an external file. Ie.: urchin.js is loaded from the section of a HTML page where I want to use Google Analytics, however Firebug doesn’t include this script in the Script tab. To look for a JS function I have to look up all the external script and search there.
    Is there an easier solution to this? (ie.: I just enter the string I want to search and Firebug searches all the scripts that is loaded in the page?
    Thanks

  27. Pingback: Project please help - x10Hosting Forums

  28. Reply yemeagain Jun 9,2009 10:03 am

    From time to time, I see firebug script tab shows the source code in a long line which is not debuggable at all. Do you know a way to resolve this kind of problem?

  29. Reply Md Mohiudeen Jul 1,2009 11:33 pm

    Thanks for the Nice Tutorial

  30. Pingback: JavaScript Standards - Not Just a Hat Rack

  31. Reply Shai Inbar Oct 26,2009 1:44 pm

    Thanks for the tutorial. I have a couple of questions. It seems that debug(fn) fails if you have an empty line as the first line in the function. Also, the autocomplete is not working for me in the multi line mode. Any suggestion? Thanks

  32. Reply Yelp Clone Dec 26,2009 1:56 am

    Great Article! Keep up the good work!

  33. Reply Lily Jan 8,2010 12:06 pm

    Great tutorial, thanks!

  34. Pingback: Working with Firebug « Xclu's Blog

  35. Pingback: 10 Firebug Extension Tutorials « Shaimifch

  36. Reply Mary Anderson Jul 22,2010 4:17 pm

    You know, it is real nice to know how to debug javascript. Actually, I figured out this tutorial for myself.

    What I do not know is how to find a syntax checker for javascript.

    It is no help for me to get an error message which says something like “function sndReq not define”
    which really means “you have a syntax error somewhere or other in your javascript code. It is up to you to inspect the code manually and find out where it is”

    Actually, sometimes firebug does do syntax checking and sometimes it does not.

    Please let me know how to do javascript syntax checking using firebug.

    Once I have running javascript code I think I can figure out how to use the debugger.

  37. Reply computer programming tutorials Aug 13,2010 3:58 am

    A very important article for javascript programmers.

  38. Reply Andrew Oct 5,2010 7:04 pm

    Hi,

    Thanks for the tutorial – but I wonder if there is any place I can download the sample file that’s not somewhere that wants to install yet ANOTHER download manager, like snips. :(

    What’s with everybody wanting to install downloaders for even some 1k file or whatever?

    Cheers

  39. Reply Douche Jan 22,2011 12:57 pm

    In the top image, 2: JS File Selector does NOT point to the JS file selector…
    The JS file selector doesn’t even exist in that screenshot…
    Thanks for confusing the hell out of me.

  40. Reply srwd Feb 27,2011 8:27 am

    I am not able to make the commandline work while debug.
    I typed in the following in the console when debugger breaks at the console.log(dwarfs[idx].Name) line
    console.dir(dwarfs[idx])
    and I see the following
    ReferenceError: dwarfs is not defined
    any suggestions?

  41. Reply David Mar 6,2011 11:29 am

    Agreed with TravisO, one of the most effective tutorials I’ve read in a very, very long time. Thorough, detailed, yet well done. Learned a lot, and I’ll definitely come back to it.

    Once again, well written! Appreciate it!

    Cheers,
    David

  42. Reply udip May 6,2011 1:45 am

    Very good article for js developer. Here is a good reference covering html, css, js on Firebug. Thanks.
    http://www.w3resource.com/web-development-tools/firebug-tutorials.php

  43. Reply ted Aug 13,2011 4:18 pm

    thats kinda lame that you sample file is only downloadable with “esnips downloader” which happens to only be an .exe, kind of ironic though since javascript is meant to break the platform restrictions.

  44. Reply Michael Sync Sep 15,2011 6:38 pm

    Hi ted,

    So sorry about that. I didn’t have any place to upload when I was writing this article. I do have my own host now and I will change the link .. Thanks for reminding me..

  45. Reply Baiju Sep 29,2011 12:00 am

    Thanks for posting this article. got an understanding how to debug in firebug.

  46. Reply Steve Nov 17,2011 6:11 am

    Excellent tutorial. We all worry about Myanmar. You are in our hearts.

  47. Reply Michael Sync Nov 17,2011 8:40 am

    @Steve Worry about Myanmar? :) Okay.. Thanks!. :)

  48. Pingback: Debugging JavaScript code using Firebug « Deep Byte

  49. Reply Norbert Bauer Dec 18,2011 4:20 am

    I have no problem to debug an inline javascript. I use an external javascript in a .js-file. The function consists of a very long line with many commands.
    1. is there a tool to get this function structured in many lines?
    2. if I debug in, it only shows the next line, not the next command. So I cannot debug, because the script consist of only one line.
    3. It seems that it is called with a timer or like that. Because if I have a breakpoint there it is always called after a I run the script.
    4. It is called by a button with onclick=”return …..;” I cannot set there a breakpoint, not for calling the button, but for clicking on the button?

    Thanks for help.

  50. Pingback: Some resources on JS Performance « sundergs

Leave a Reply