Note! This article is part of a series (see here). In previous articles we explored syntax, string and performance testing. In this installation, we will explore functional testing and source code debuggers.

Our initial code really doesn't have much logic (see person.js detailed in previous articles). Right now, our person entity can only be identified by first and last name. In the real world we need additional properties to uniquely identify an individual person. In the U.S. we use a social security number. For our example code, lets just add a property called "id". Id is a unique number.

We are also adding a collection of persons (E.G personList). Our collection will allow to get an an individual by their "id" value.

Our functional test is "verify personList.getPerson(2) returns the person with an id value of 2". We'll add at 3 persons to our list. We'll make sure one of the persons has an id value of 2.

Here is our new code:

var person = function(id, first_name, last_name) {
    this.init = function(id,first_name,last_name) {
        if (id) {
   = id;
        if (first_name) {
            this.first_name = first_name;
        if (last_name) {
            this.last_name = last_name;
    this.getId = function() {
    this.setId = function(id) { = id;
    this.getFirstName = function() {
        return this.first_name;
    this.setFirstName=function(first_name) {
        this.first_name = first_name;
     this.getLastName = function() {
        return this.last_name;
    this.setLastName= function(last_name) {
        this.last_name = last_name;
    this.init(id,first_name, last_name);

var personList = function() {
    this.list = [];
    this.addPerson=function(person) {
    this.getPerson=function(person_id) {
       var len = this.list.length;
       var row = null;
       var person_found = null;
       for (var nIndex =0; nIndex < len; nIndex++) {
            row = this.list[nIndex];
            if (person_id == row.getId()) {
                person_found = row;
       return person_found;

In addition, I want to verify that, internally, the personList.getPerson() stop iterating (looping ) through the list as soon at it finds a match. Thus well use a source code debugger to watch the code execution step by step.

We are going to use FireFox's JavaScript debugger. Thus, we will need to call our JavaScript program from a web page

Our web page list is test.html and it's source code is:

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="person.js"></script>
      var persons= new personList();
      persons.addPerson(new person(2,"joe","smoe"));
      persons.addPerson(new person(1,"ed","smed"));
      persons.addPerson(new person(3,"jane","doe"));
      persons.addPerson(new person(20,"frank","tank"));
      var person_to_find = persons.getPerson(2);
      console.log(person_to_find.getFirstName() + " " + person_to_find.getLastName() );

At this point. we now use the Firefox main menu and select . Since our web page doesn't have any content. Firefox will display an empty body, but the title is displayed as "Test".

Now to start debugger session. From the FireFox main menu, select . At the top of the debugger window is a drop down list which contains the various file listings which contain JavaScript defined in test.html. So in our case there are 2 entries in the drop down list 1) person.js and 2 test.html. We want to choose test.html.

We want to set a break point on line 8. Click just left of the line number and the debugger will display a large blue dot (indicating a break point).

In the top left hand corner of the debugger as "resume", "Stop Over" , "Step In" and "Step Out" controls. The following is a screen shot:

To start the debugging session, use Firefox and "reload" the page. Either, place the mouse over the body of the empty "test" document, right click. select "reload". Or, use the Firefox location bar and left click on the "Reload current page" icon.

The debugger stops page execution at line 8 (where we set out break point). Click on "Step Over" till we get to line 13. Note in the right pane, the debugger displays "persons" instance of the "personList". We can watch the internal array as it's populated with "person" entities.

When we get to line 13 let's click "Step In" and inspect the our personList.getPerson() method. Once inside the getPerson() method click on "Step Over" till we return to the test.html and line 15 (E.G. console.log(person_to_find.getFirstName() +..... et) is executed.

Above the debugger, we can switch tools to "Web Console" (just left click on "Web Console"). The "Web Console" displays console output. In addition, there is a JavaScript command at the bottom of the display. In the next screen shot, I've entered the command "person_to_find.getLastName();" to demonstrate use of the JavaScript command line.

In the JavaScript console, we can use whatever is in scope. Since "persons" is global, we still have access to it. We can also issue Document Object Model (DOM) selection commands, like "var div = document.querySelector("#some_id");". Right now that command doesn't return anything, because our document does not have any "div" elements with an "id" attribute of "some_id".

Chromium as well as any other webkit based web browser also comes bundles with a source code debugger and a JavaScript console. In later installments of our series we will show you how to debug JavaScript running in your mobile browser.

To summarize, source code debuggers are great tool to have in your JavaScript programmer's tool chest.

About the Author:
Lorin M Klugman is an experienced developer focused on new technology.
Open for work (contract or hire).
Drop Lorin a note. Click here for address.
Please no recruiters :)
- Home