What is the best jQuery Dump option?

This post is more than 2 years old.

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):

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Carl Von Stetten posted on 10/22/2010 at 9:48 PM

Ray,

I've used this one for a few years, and it rocks:

http://www.netgrow.com.au/f...

It was developed by someone who wanted a javascript equivalent of <CFDUMP>. I haven't tested it with jQuery 1.4, so YMMV.

Comment 2 by Drew posted on 10/24/2010 at 7:46 PM

As I have moved away from ColdFusion, I have become very comfortable with console.log. It allows recursive traversal, but you may need to add console.log to your code (no worse than including debugging plugins) or using line breaks to get not just a single variable, but inspect the entire scope chain. These tools have been getting better and better, which is probably why fewer people are working on dump plugins.

Comment 3 by Phillip Senn posted on 6/13/2011 at 9:53 PM

Is this the latest on the jsDump front, or have there been any new developments? There are some comments with the jQuery plugin such as it doesn't work with FF 4.