What is the best jQuery Dump option?

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> </code>

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 developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

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

Comments