Check Array and Object Values in JavaScript with console.dir()

The alert() method in JavaScript is useful for quickly seeing what a variable contains as the program executes, but it has some limitations. It won't display the values stored in an array without creating a loop, for example. If you do create a loop, alert boxes can be aggravating since they each need to be confirmed separately. Luckily, there is another JavaScript method.

Background

In the previous post (Make Sure Things Are Working Correctly in JavaScript with the alert() Method), we used the alert() method to check that a variable contains an expected value. However, the method isn't always the best choice. Let's say the previous post's form has more fields:

<form method="post" action="" onsubmit="return validateForm();">
<div><label>Name: <input type="text" name="name" /></label></div>
<div><label>Email: <input type="text" name="email" /></label></div>
<div><label>Phone: <input type="text" name="phone" /></label></div>
<div><label>Address: <input type="text" name="address" /></label></div>
<div><label>City: <input type="text" name="city" /></label></div>
<div><label>State: <input type="text" name="state" /></label></div>
<div><label>Zip: <input type="text" name="zip" /></label></div>
<input type="submit" name="submit" value="Submit" />
</form>

The loop that displays the field names and values would generate 8 separate alert boxes…all of which need to be confirmed separately.

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     //LOOP THROUGH THE INPUT FIELDS
     for(var i=0; i<formFields.length; i++) {
          alert('Name: ' + formFields[i].name + '\nValue: ' + formFields[i].value);
     }
 
     //PREVENT FORM SUBMISSION...FOR NOW
     return false;
}
</script>

Of course, browsers like Chrome provide an option for ignoring subsequent alert boxes (see Figure 1).

Figure 1. Option to Prevent More Alert Dialogs

Checking this option, however, prevents all future alert boxes from the page…even after refreshing the page. This tends to be a problem since I usually only want the loop to stop generating alerts. I typically have more testing to do. In order for the alert boxes to appear again, you need to completely close the browser tab and start over.

Alternate Solution

It turns out that JavaScript has another method for debugging called console.dir(). If the earlier loop is modified to use this newer method:

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     //LOOP THROUGH THE INPUT FIELDS
     for(var i=0; i<formFields.length; i++) {
          console.dir('Name: ' + formFields[i].name + '\nValue: ' + formFields[i].value);
     }
 
     //PREVENT FORM SUBMISSION...FOR NOW
     return false;
}
</script>

The output from console.dir() is now pushed to the browser's JavaScript Console (see Figure 2). Note: the screenshot below shows Google Chrome's Console which can be accessed with a keyboard shortcut (Ctrl + Shift + J).

Figure 2. Console Showing the Field Names and Values

Viewing Arrays and Objects

With console.dir(), you technically don't even need the loop to see the contents of the formFields variable. The following dumps the entire contents of formFields into the JavaScript Console.

<script type="text/javascript">
function validateForm() {
     //INITIALIZE VARIABLES
     var formFields = document.forms[0].elements;
     var missingFields = [];
 
     console.dir(formFields);
 
     //PREVENT FORM SUBMISSION...FOR NOW
     return false;
}
</script>

Now you can see that formFields is actually an object and the JavaScript Console lets you expand and collapse the various elements of the object (see Figure 3).

Figure 3. Console Showing the formFields Object

Conclusion

While console.dir() provides output in a less distracting way, the alert() method still has its advantages. If the example script above didn't have that "return false;" statement, for example, the form would have been submitted. The form submission causes the page to reload and all the output from console.dir() would be lost. Using alert() in the loop forces the browser to delay the form submission and wait until all the alert boxes are confirmed.

With that said, I see myself getting more use out of the console.dir() method. Especially for being able to quickly see the contents of an array or object.

Related Posts

• Make Sure Things Are Working Correctly in JavaScript with the alert() Method