For Loop Debugging In JavaScript

The for loop in JavaScript can be used to iterate through all items in an array or properties of an object. This makes looping through any object or array very easy. As in the following example that printing out all items in an array.

var count = '';
var numbers = new Array(3);
numbers[0] = 42;
numbers[1] = 13;
numbers[2] = 73;
for(i in numbers){
  count += numbers[i]+' ';
}
alert(count);

The three main objects to do with a JavaScript are navigator, window and document. Although window is part of navigator and document is part of window. So to print off all information to do with a browser you can do the following. Note that some items in window and document can cause JavaScript to crash in some browsers so some error detection is included here.

var html = '<table border="1">';
html += "<tr><th>Navigator Properties</th><th>Value</th></tr>";
for(i in navigator){
  html += "<tr><td>" + i + "</td><td>" + navigator[i] + "</td></tr>\n";
}
html += "<tr><th>Window Properties</th><th>Value</th></tr>";
for(i in window){
  try{
    html += "<tr><td>" + i + "</td><td>" + window[i] + "</td></tr>\n";
  }catch(err){
    // skip item
  }
}
html += "<tr><th>Document Properties</th><th>Value</th></tr>";
for(i in document){
  try{
    html += "<tr><td>" + i + "</td><td>" + document[i] + "</td></tr>\n";
  }catch(err){
    // skip item
  }
}
html += '</table>';
var div = document.getElementById('test');
div.innerHTML = html;

This produces the output.

Note : Table cut off for brevity.

Internet Explorer will label everything with the value of that property or as an "object" regardless as to the object type. Firefox, Safari and Opera will give more meaningful output with a number of different object types. A couple of object types to watch out for are as follows:

1. [native code] : This is native JavaScript code. For example, in the document object you will see a property called write with the value of function write() { [native code] }. This is the document.write function that can be used to write output to the browser.
2. [object HTMLCollection]: This is a collection (or array) of HTML objects. For example, every link in the document body is kept in the links property.
3. [object Window]: For the frames property this object is an array of windows, one object for each frame. This object type is called [object WindowCollection] in Opera.
4. [object PluginArray]: This is an array containing information about the plugins available in the browser which is not available in Internet Explorer. To find plugins for Internet Exploer you will need to use VBScript. Firefox has additional untility property and functions. If you wanted to know is the user had flash installed then you could use this array to look for the Shockwave Flash plugin. Each plugin object has a property of name that you can use to see what the plugin is.

To find the values of any inner object you can use the dot notation in the same array as before. For example, to see all of the plugins available for your browser use the following code (not in IE). As each plugin has a name property this has been included to detail the name of each plugin.

html += "<tr><th>Plugins</th><th>Value</th></tr>";
for(i in navigator.plugins){
  html += "<tr><td>" + i + "</td><td>" + navigator.plugins[i] + " " + navigator.plugins[i].name + "</td></tr>\n";
}

To find all of the available links on a page you can use the document.links array. As each link should have a title tag this can be referenced use the title property of each link.

html += "<tr><th>Plugins</th><th>Value</th></tr>";
for(i in document.links){
  html += "<tr><td>" + i + "</td><td>" + document.links[i] + " " + document.links[i].title + "</td></tr>\n";
}