Alex @ Net

Here you can type the any JavaScript expression and if it returns object, the tree below shows all object model below this object. For example, you can type "document", "document.body", "location", "navigator" and so on. This Object Browser works successfully in Firefox, IE, Opera, Safari and created using YUI TreeView with dynamic node loading.

Browse

How it works?

YUI has a very good TreeView component that supports dynamic loading of the nodes. So what you see on the screen is an instance of the TreeView object.

The data for the tree is obtained from the JavaScript objects, using iteration over object's properties. If the property contains string, boolean or number, the corresponded tree element becomes leaf. Otherwise it is displayed as collapsible node.

Here is the source code of the browser. It is similar to the TreeView Control: Dynamically Loading Node Data example from YUI library web site, so you can read it for more comments and information.

<div id="treeDiv1"></div>
<script type="text/javascript">

var tree;

// This function is user for dynamic node loading. It is called when 
// user expands the collapsed node first time. fnLoadComplete 
// is the callback function that should be called when loading 
// is complete.
function loadNodeData(node, fnLoadComplete) {

	// This array contains properties of the object, so I can sort them later.
	var props = [];
	// Some objects in IE does not support enumerating over properties.
	try {
		for (var p in node._obj) { break; }
		for (var p in node._obj) {
			props.push(p);
		}
	} catch (e) {}

	// For very big arrays or objects with a lot of properties.
	if (props.length > 250) {
		if (!confirm('This object contains a lot of properties (' + props.length
			+ ' items) and rendering them may take a lot of time. Continue?'))
		{
			return fnLoadComplete();
		}
	}
	props = props.sort();

	// To handle each data type differently.
	for (var k in props) {
		var tmpNode, val = null, type = 'undefined';
		try { val = node._obj[props[k]]; } catch (e) { }
		var type = typeof val;
		switch (type) {
			case 'number':
				tmpNode = new YAHOO.widget.TextNode(props[k] + ' (' + type + ': ' + val + ')', node, false);
				break;
			case 'boolean':
				tmpNode = new YAHOO.widget.TextNode(props[k] + ' (' + type + ': '
					+ (val ? 'true' : 'false') + ')', node, false);
				break;
			case 'undefined':
			case 'string':
			case 'function':
				tmpNode = new YAHOO.widget.TextNode(props[k] + ' (' + type + ')', node, false);
				break;
			default:
				tmpNode = new YAHOO.widget.TextNode(props[k], node, false);
				tmpNode._obj = val;
				// If the property value is object, attach loadNodeData() function.
				if (null != val) {
					tmpNode.setDynamicLoad(loadNodeData, 0);
				}
				break;
		}
	}
	fnLoadComplete();
}

// Gets value of the 'expression' Textbox, evaluates it and builds the tree 
// if evaluation is successful.
function browseObject() {
	var expression = document.getElementById('expression').value;
	var obj = null;
	try {
		obj = eval(expression);
	} catch (e) {
		alert('Unable to evaluate the expression');
	}
	if (null != obj && 'object' == typeof obj) {
		buildTree(obj);
	} else {
		alert('Expression is null or is not an object');
	}
}

function buildTree(obj) {
	tree = new YAHOO.widget.TreeView("treeDiv1");
	var node = new YAHOO.widget.TextNode("Object", tree.getRoot(), false);
	node.setDynamicLoad(loadNodeData, 0);
	node._obj = obj;
	tree.draw();
}

YAHOO.util.Event.onDOMReady(browseObject, null, true);
</script>

This code successfully works in the following browsers:

• Mozilla Firefox 2
• Internet Explorer 7
• Opera 9
• Safari 3 (Win)