in Firebug

Firebug Tutorial – Script Tab : Javascript Debugging

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..

Leave a Reply

43 Comments

  1. 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.

  2. 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 :(

  3. 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..

  4. 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.

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

  6. 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.

  7. 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

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. “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 ?

  13. 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

  14. 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?

  15. 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

  16. 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.

  17. 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

  18. 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.

  19. 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?

  20. 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

  21. 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.

  22. 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..

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

  24. 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.

  25. Hello, is it possible you can delete the Firebug and the debugging process from my desk top? It has popped up and won’t erase. I don’t believe I need it, and do not want it.

    Please help. Lydia in Idaho

  26. Many thanks for your clear and straightforward explanation.

  27. From: Naveed Ali
    very good tutorial for beginners.
    Need more examples.
    Thanks