In this article we will see how to debug JavaScript code running in the browser Mozilla Firefox, adding breakpoints and inspecting variables.
Firefox already has native Debug tools as in Google Chrome. The only big difference is in the taste of each one, so feel free to choose any of the tools because both are quite efficient. In this article we will use the browser Firefox 18.0.2 for debugging code.
There are still, for those who want more control and debugging options, an add-on called Firebug available for both Google Chrome and Firefox, with which you can have even more debugging capabilities. But here we will use the native debug tool of Firefox.
Using Firefox to Debug
Let’s begin by developing a simple page with just a text field and a button. It is very important that you separate your JavaScript code in another file, in order to better debug and as a good practice. The code shown below is simple. Put the JavaScript in the HTML page. This is a simple page. However, when dealing with complex applications the context is different because it is much more difficult and costly debugging code that are “broken in pieces” within several pages.
The code below was built on one page only (having HTML and JavaScript), because as has been said this is a simple example, to understand the debugging feature in Firefox.
Listing 1: HTML page with JavaScript code for debugging
<! Doctype html>
<html>
<head>
<script>
function wordConvert(word) {
var myWord = word.toUpperCase();
//Turns everything to UPPERCASE
document.getElementById ('word').value = myWord;
}
</script>
</head>
<body>
<form onSubmit = 'wordConvert(word.value);' action = '' method = 'post' >
<label> Word: </label>
<input type = 'text' name = 'word' id = 'word'>
<input type = 'submit' name = 'btnProcessor' value = 'Process'>
</form>
</body>
</html>
The above code is very simple and is responsible for performing the following task:
The user enters any word in the text field and clicks on the Process button. On submit method in Form tag the method wordConvert from JavaScript is called and the value of the text field is passed as a parameter.
In wordConvert method we convert the typed word to UpperCase (upper) and then replace in the same text field.
Let’s analyze step by step from here:
1. First open the Debug Console for Firefox: Ctrl + Shift + S. Now click the Debugger tab to use the debugging feature as shown below:
Figure 1: Console Debugging Firefox 18.0.2
2. You can find all features of debugging under Firefox> WebDeveloper> Debugger.
Note that when performing step 1 you should have the page (we coded in step1)open. Now let’s just set a breakpoint to tell the Firefox debugger where it should stop running so that we can analyze it step by step. To add a breakpoint, just click on the row number where we want to add it.
Figure 2: Adding a breakpoint
3. Now let’s enter the phrase “hello world” in the text field and click Process. Note that the code execution will stop exactly on the line we want.
Figure 3: Debugging line 6
Right at the top we have 4 basic controls (Resume, Step Over, Step In, Step Out). These have the logic identical to any IDE (Eclipse or Netbeans, for example). The Resume jumps to the next breakpoint, the Step Over passes over a particular line without going into the current method. The Step In passes over a given line entering any and all methods and the Step Out gets out of the method that Step In entered.
On the left side we have the name of two methods: wordConvert and onSubmit. As you may have noticed, the onSubmit is responsible for calling the wordConvert.
On the right side we have 2 divisions, which are (ordered vertically, from top to bottom):
Division1: We have here the “Function Scope“. Here are all the variables that the debugger is monitoring that scope. Notice something very important here for our example: the word variable has the value “hello world” and the variable is myWord with value “undefined“, because it does not execute the line that assigns the value of the word for myWord, this will only be done when we use the Step Over debugger control.
Division 2: This is the “Global Scope“, i.e the global variables which are present in this case (Window), which are numerous.
Press the F7 (Step Over) and the debugger will move to the next line, the exact line 8. NOTE: It skips line 7 because it has only comments.
Note that the value of the variable myWord changed to “HELLO WORLD”, into uppercase as intended.
Figure 4: Change of Variable myWord
Click again on F7 (Step Over) to move to the next line and finalize the clearance, the effect will be: the text field will be set to all uppercase as in the screen below:
Summary
This article discussed about how to debug your page using the Firefox debugger. Debugging helps improve the control process in the development and testing of software. This tool is indispensable Tool Kit for any developer developing front end pages as this would help increase the productivity. If you are interested in receiving the future articles, please subscribe here. follow us on @twitter and @facebook
CSS Z-Index example