While investigating an issue at work I came across a jQuery based dump utility. You can see an example of it here. Unfortunately it completely failed to work for me in any tests of DOM objects. I could pass in simple arrays and strings just fine, but anything DOM related died. (Even though his screen shots clearly show DOM items.) That led me to do a more generic search for a jQuery-based dump plugin. Two results were found of which one had no download. The remaining one, Dump, was last updated two years ago but worked fine no matter what I threw at it. It's not as pretty as the ColdFusion dump, but at least it works. I've found myself needing a tool like this recently so I'd like to know if anyone has a better jQuery dump solution? Here is a simple example showing the plugin from tdolsen:

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery/jquery.dump2.js"></script> <script> $(document).ready(function() {

$("#testButton").click(function() {
	console.log('run!');
	res = $.dump($("#someForm")[0]);
	console.log(res);
});

}) </script> </head>

<body>

<form id="someForm"> <table> <tr> <td>name:</td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td>email:</td> <td><input type="text" name="email"></td> </tr> <tr> <td>fav movie:</td> <td> <input type="radio" name="movie" value="Star Wars">Star Wars<br/> <input type="radio" name="movie" value="Empire Strikes Back" selected="true">Empire Strikes Back<br/> <input type="radio" name="movie" value="Return of the Jedi">Return of the Jedi<br/> </td> </tr> <tr> <td colspan="2">comments:<br/> <textarea name="comments"></textarea> </td> </tr> <tr> <td>Test:</td> <td><input type="button" id="testButton" value="Test"></td> </tr> </table> </form>

</body> </html>

And if you are curious as to the result....

run! test3.cfm:12DOMElement [ nodeName: FORM nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TABLE nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TBODY nodeValue: null innerHTML: [ 0 = DOMElement [ nodeName: TR nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = String: name: ] ] 3 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] ] ] ] ] 2 = DOMElement [ nodeName: TR nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = String: email: ] ] 3 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] ] ] ] ] 4 = DOMElement [ nodeName: TR nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = String: fav movie: ] ] 3 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] 2 = String: Star Wars 3 = DOMElement [ nodeName: BR nodeValue: null innerHTML: [ ] ] 5 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] 6 = String: Empire Strikes Back 7 = DOMElement [ nodeName: BR nodeValue: null innerHTML: [ ] ] 9 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] 10 = String: Return of the Jedi 11 = DOMElement [ nodeName: BR nodeValue: null innerHTML: [ ] ] ] ] ] ] 6 = DOMElement [ nodeName: TR nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = String: comments: 1 = DOMElement [ nodeName: BR nodeValue: null innerHTML: [ ] ] 3 = DOMElement [ nodeName: TEXTAREA nodeValue: null innerHTML: [ ] ] ] ] ] ] 8 = DOMElement [ nodeName: TR nodeValue: null innerHTML: [ 1 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = String: Test: ] ] 3 = DOMElement [ nodeName: TD nodeValue: null innerHTML: [ 0 = DOMElement [ nodeName: INPUT nodeValue: null innerHTML: [ ] ] ] ] ] ] ] ] ] ] ] ]

As you can see - it is readable, but it would be nicer if it was a bit more compact. Color coding wouldn't work well in the console. Of course, if your only target is the console itself, it probably makes sense to just use console.dir:

console.dir($("#someForm")[0]);

This returns (and I cropped this screen shot a bit to make it fit):