2019独角兽企业重金招聘Python工程师标准>>> 
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.
- Overview of Script Tab
- Debugging Javascript with Firebug
- Javascript File Selector
- Conditional breakpoint
- Using Commandline API while debugging
- 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.
- 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.
- 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.)
- Line of Code & breakpoint : This is a place where you can set the breakpoint for debugging.
- 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.
- 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)
- Take a look at “Breakpoint” window at the right panel. (One line is added in “Breakpoints” windows as shown in pic.)
- Click “Click Me!” button on your page. (The Javascript execution will stop at the breakpoint that you set on line 7. )
- 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.
(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. )
- 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.
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.
#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.
- 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.
- 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.
- 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..
