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):
Archived Comments
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.
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.
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.