In javascript there is no function for printing variables like you have PHP, I use print_r and var_dump alot in PHP for dumping variables
so I wanted to create a simular function in javascript.

If you want to walk through unknown child objects in javascript you can use a operator called ‘in’ like this:

//Create a object
element = {child1: 'First child', child2: 'Second child'};

string = '';

//Loop through all the child objects in element
for(property in element)
{
	//Add the name and value of the child object
	string += property + ': '+ element[property] + ''+ '\n';
}
//Ouput the result
alert(string);

For walking through subchilds of the element we can add another for-loop within the for-loop above, but there is also a nice method called recursion we can use:

function var_dump(element, depth, tab)
{
	if(!depth)
		depth = 0;
	if(!tab)
		tab = '';

	tab += '\t';
	string = '';

	//Loop through all the child objects in element
	for(property in element)
	{
		//Add the name and value of the child object
		string += tab + property 			

		//Check if the child is an object
		if(typeof element[property] == 'object')
			string += '\n'+ var_dump(element[property], depth+1, tab) + '\n';
		else
			string += ': '+ element[property] + ''+ '\n';
	}

	//Ouput the result
	if(depth == 0) alert(string);	

	return string;
}

element = {child1: {grandchild1: 'First grandchild', grandchild2: 'Second grandchild'}, child2: 'Second child'};
var_dump(element);

This function can theoretically walk through an unlimited amount of child objects, but the most browsers have a recursion limit build in what you can test if you give a larger object to the function: var_dump(document.body);

To dump larger objects we must add a limit to the function, the alert window isn’t suited for printing large objects so I’m going to use a popup for it:

function var_dump(element, limit, depth)
{
	depth =	depth?depth:0;
	limit = limit?limit:1;

	returnString = '<ol>';

	for(property in element)
	{
		//Property domConfig isn't accessable
		if (property != 'domConfig')
		{
			returnString += '<li><strong>'+ property + '</strong> <small>(' + (typeof element[property]) +')</small>';

			if (typeof element[property] == 'number' || typeof element[property] == 'boolean')
				returnString += ' : <em>' + element[property] + '</em>';
			if (typeof element[property] == 'string' && element[property])
				returnString += ': <div style="background:#C9C9C9;border:1px solid black; overflow:auto;"><code>' +
									element[property].replace(/</g, '&amp;lt;').replace(/>/g, '&amp;gt;') + '</code></div>';

			if ((typeof element[property] == 'object') && (depth < limit))
				returnString += var_dump(element[property], limit, (depth + 1));

			returnString += '</li>';
		}
	}
	returnString += '</ol>';

	if(depth == 0)
	{
		winpop = window.open("", "","width=800,height=600,scrollbars,resizable");
		winpop.document.write('<pre>'+returnString+ '</pre>');
		winpop.document.close();
	}	

	return returnString;
}

element = {child1: {grandchild1: 'First grandchild', grandchild2: 'Second grandchild'}, child2: 'Second child'};
var_dump(element);
//The body object with a bigger limit. Only do this when the body is done loading, for example: <body onLoad="var_dump(document.body, 2);">
var_dump(document.body, 2);

I added some type checking to print object values, the tabs are replaced by an ordered list so it will be formatted automatically by the browser.

Now we have a nice dump function which can be very handy for debugging in javascript, you can pass any type of object to the var_dump function.

var_dump example

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Furl
  • LinkedIn
  • StumbleUpon
  • Technorati
  • TwitThis
  • NuJIJ