Web Design Files
Dump Method
The Dump method is based on one of the tags available in Coldfusion ( <cfdump>) providing the ability to display simple and complex variables in a user friendly way that is perfect for debugging/inspecting data. There is no way to do this with javascript and often I had wanted a method to do this. This method will do just that allowing for an infinite amount of data nesting complete with color coding for different data types, the ability to show/hide the data's type (String/Number/Boolean/Object/Array/Function), expandable and collapsible tables/keys and cross browser support.
Click on the buttons bellow to see some examples in action, toggle the Show Data Types box to see javascript data typing in action (not possible in Coldfusion).
Thanks to John Wilson for providing the jQuery plugin.
Browser Support
Internet Explorer 6, Internet Explorer 7, Firefox 1.5, Opera 8, Safari 1.2 (Mac), Firefox (Mac) - all tested, should also work in most other browsers
Download
Click here to download the latest version (1.08)
Click here to download the latest jQuery plugin
Dump Examples
Click to see dump examples (Click on headings/keys to expand and collapse tables/values)
Usage
dump(value, [showTypes])
@ param
value (Any) value to dump
@ param
[showTypes] (Boolean) optional to display each key/value's type
@ return (Void) returns nothing
Examples
dump(myObject, true); // opens a dump window displaying key/value types of myObject
dump([123,456,789], false); // opens a dump window not displaying key/value types of the array passed
dump('string value', false); // opens a dump window showing the string value
Back to Website Files
Comments
Feel free to comment below.
All Comments
Anyone know how to alter this so the dump is appended to the html page, instead of in a pop up?
mboles57@gmail.com
uuuu
yyy
afdadsf
cs
its just awesome, i started writing my dump but its lots of effort, i got this. this is just awesome
prashantroy1979@gmail.com
??
??
It's like the heavens heard my prayers today!!!
gd@unsw.edu.au
no workee... firefox 4
won.tok@wontok.com
great tool!!! thx. I use it since a longtime. But now, it doesnt' work anymore in firefox 4.
seems does not work with firefox 4, please help!!!
tb.erick.rodriguez@gmail.com
Thank you for posting this - really useful I use it all the time
fuck u dude
hell2fucku@yahoo.com
Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you
mlowrey@ucsd.edu
nice, one of the coolest things in js world.
big tool in debugging
prashant_roy8@yahoo.com
cf + jquery + dump = dev nirvana
good~Thank you!
i don no ?
doctor620@yahoo.com
Excellent work. Only thing that I see that could be improved would be to limit recursion if an object hierarchy is circular. For myself, I put a hard limit into the code to only go down 10 levels (sufficient for my current needs). But someone with more time on their hands could probably auto detect circular references and make a more general solution.
foo@foo.com
Hi,
This is max from canada. I am a newbie of this site and i think this site has a lot to provide to the visitors.
onlinev
[/url=http://themastercleanse.org/the-lemonade-diet ]The Lemonade Diet Cleansing Directions[/url]
The Lemonade Diet Cleansing Directions
st.kpo13@gmail.com
Hello, Very Nice! Thanks!
iczalazar.net
eeeee
eee
Excellent!
Creative website designer Small business website design We are custom website Designer. Small business web site design, small business website design, small business web designer
webdesignhead@gmail.com
Excellent!
Thanks
sanjaykanteti@gmail.com
I saw this function, I peed my pants. Excellent work!
I try to dump DOM object such as 'document' etc. But it seems can't work, Does dump support DOM object ?
mdengfeng@gmail.com
Just FYI, Firefox 2.0.0.11 seems to be opening empty windows. I can only get it to work if I switch to an IE Tab. Maybe it's me...maybe not.
Nice, though!
RatherNot_IfYouPlease@test.com
A few hours after I installed this on my machine and did some work in cfgrid, I got all call from my CIO wanting to know why I hit netgrow.com.au over 2000 times in such a short amount of time. I was wondering the same thing after he brought it to my attention. What's up with that?
jude@nighttimeswerve.com
Very useful & nice. Thank you!
Firefox 2.0.0.4 - don't work any tests.
Konstantin@Tokar.ru
Excellent!
Awesome, i was looking for something like this for a long time.
rjlopes@gmail.com
I think this may go along with the Drill-Down idea that Guillaume posted. If you try and dump something very large, I get memory problems due to too much recursion. What if you didn't automatically expand everything, but rather fetched the data for the particular object the user clicked on *after* they click on it. Does that make sense?
cjordan@placs.net
I think this may go along with the Drill-Down idea that Guillaume posted. If you try and dump something very large, I get memory problems due to too much recursion. What if you didn't automatically expand everything, but rather fetched the data for the particular object the user clicked on *after* they click on it. Does that make sense?
cjordan@placs.net
Drat! I refreshed... sorry for the double post. :o)
cjordan@placs.net
There is now a jQuery plugin that can be downloaded aswell. Can be used: jQuery.dump(['a','b'{}], true); or jQuery('input').dump();
Idea for improvement : Drill-Down !! :-)
No licensing restrictions, just a mention is cool :)
shaun@netgrow.com.au
Same question as the first commenter. Any licensing restrictions?
clutterskull@gmail.com
The code appears unlicensed, do you have any terms you want us to follow if we modify / redistribute? This is very handy code indeed, but I may make a number of modifcations, am I allowed to do so?
Really handy. Thanks
ashish@apptheory.net
This is Amazing ! you should submit this to the various js libs out there, the world would appreciate it ! Thankyou
jsdump@cybrium.net
Dude! I've got code that does something similar, but yours blows mine out of the water! Very nice! :o)
I think I'll start using it! :o)
cjordan@placs.net
using coldfsion every day for work, i'm used to using the cfdump feature. You did this for javascript to the 't'. even with expanding and the same colors! Awesome!
cross@intraxinc.com
AWESOME! Thanks!
holtonma@gmail.com
sweet!
m.schipperheyn@gmail.com
Check out the nice mention over at Ajaxian:
http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion
rey@reybango.com
Hallelujah!!!!!
schmism@parknicollet.com
AMAZING!!! Thank you.
One small bug: If value of a variable contains XML or HTML, dump() doesn't show it properly.
REASON: Browser trys to parse the string value which is XML or HTML as soon as it finds "<".
SOLUTION: dump() must convert all instances of "<" to "≤", or at least let the user ask dump to do so.
IDEAL SOLUTION: Values should be prosessed by a function similar to CF's htmlEditFormat()
Really magic!
Got a small problem (I am no Javascript expert !) with variables whose type 'unknown' (??) lead to errors.
-> quickly solved by handling this special case in the code
That's really magic!!! Will save me hours of debuging.
Marcos Placona
http://placona.co.uk
marcos.placona@gmail.com
That is so useful!
Good work
COOL
Good Job!
This is absolutely wicked !!
Very nice. Could use a Label argument too - useful for showing which variable is being dumped. And (as opposed to CF) just have it in the outermost box's header?
davidl@teratech.com
Sweet. I have been looking for this for years.
Totally Awesome!!
You rock!! This is fantastic.
In every language (other than CF) that I work with, I think to myself, I wish I had a CFDUMP equivelant. I'm sure this will save me plent of time debugging my JS.
This would be a great thing to put on Google Code Projects.
Great job.
I had created a dump function for javascript. My version was inspired by the print_r() function of PHP instead of Cold Fusion.
It is available here...
Dump() Function for Javascript
My function is much simpler that your function.
SWEET!
It's the same as the one in coldfusion but very handy for JS .. thks
pim.man@gmail.com
Very handy.
I love your dump script and am using it for debugging a lot of my work. I have a feature suggestion/request: have a parameter to open the dump with all of the values collapsed initially, so that it's a small list of just the root stuff, which the user can expand, rather than only having the current way backwards of that: having to click to collapse. Thanks.
willglaub@gmail.com