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