Introduction
This script can dump any type of Javascript data (or most), thus, generating a string out of the received information.It's specially useful when creating some kind of console or logger.
Also, it can be used for the development stage, when you need to inspect things on browsers that lack a good console.
How to use
Very simple:var dumped = jsDump.parse( ... );Instead of '...', you need to put the data that you want to dump.
That could be an array, a date, the document, an array of arrays, etc.
The variable 'dumped' will now contain a string with the dumped version of your data.
Settings
These are the things you can configure:HTML
(boolean) If true, the data will be escaped for html output, the default setting is false.
Note that the script won't escape all the text, only the parts added by the script (indentation, new lines, dumped nodes), it won't alter original strings, etc.indentChar
(string) This is the unit of indentation, by default it is 4 whitespaces.
Keep this agnostic from the HTML mode, it will escape spaces and tabs by itself.multiline
(boolean) Whether to generate multiline code. The default is true. This is specially relevant when dumping collections.DOMAttrs
(Object) This contains a map of attributes, that need to be dumped from HTML nodes.
The keys must be the names to be showed. The values, the real name of the attribute contained in the node.
By default, 'id', 'name' and 'class' are dumped (only if not empty).
jsDump.HTML = true;This needs to be done before calling .parse().
More methods
jsDump also contains a method, jsDump.typeOf, that is used internally to sniff the type of what you send.You can use this function for your own code, it'll make an advanced typeof.
To modify the way a certain kind of data is dumped, you must set that using the method 'setParser'.
The 'parser' can be a string, or a function. Use a string if the output is always the same, otherwise, use a function. It will receive the object as argument and must return the parsed string.
You use it like this:(f.e)
jsDump.setParser( 'number', '[number]' ); jsDump.setParser( 'date', function( date ){ return date.toUTCString(); });To see all the data types, check the source, no gain on listing them all here.
Lastly, you can create your custom types, by just adding them to the list, then, inside a parser function, you can call the method .parse() and pass, as second argument, the custom data type.
This will force the script to use that type, instead of sniffing it from the data.
13 comments:
I've been working on a similar library called jQuery.print: http://github.com/tmm1/screw-unit/tree/master/lib/jquery.print.js
I used it to implement a simple console that works in IE6/7/Safari/Opera/FF: http://web.mit.edu/~agp/www/jsconsole/
Very nice Aman!
Note that you're not sniffing arguments arrays and nodelists.
You can check for the attribute 'callee' and 'item' respectively.
Have you checked my Maxthon js console ?
I'm not sure I follow what you mean with arrays/nodelists and callee/item..
Where can I find your js console? My goal is to create something like firebug (with dom viewer, etc) that can be used in any browser by simply including a single script src tag in the page.
I meant that your console could detect 'arguments' arrays and nodelists too and dump them as normal arrays.
My console is in this blog, the first link under "Scripts", but it's specifically for the Maxthon Browser.
would be nice to have also the ability to pass several arguments into dumo
Hi (name?)
Would you describe a situation where that's useful ?
You can wrap all the data you want into an array, as in:
jsDump.parse([1,2,3]);
How'd you dump many arguments ?
Thanks Ariel. I've added support for arguments and nodelists: http://github.com/tmm1/screw-unit/commit/b11bb15921302536956fc0a0d7e4364a47cffbbd
If you have any other suggestions or improvements, please let me know!
A have created a similar function - dump()
Very nice !
You shouldn't iterate arrays with for...in. That can lead to undesired output.
You should detect array-likes, but checking if it has length and use an index-based for.
Cheers
I've made very similar source_of function for the console.js.
My function dumber than your dump:
— It has no pretty formating, objects printing in one line.
— You can't change just one parser
Damn, I should find your solution first and do not reinvent the wheel :-)
I've forked jsDump from code.google.com.
First of all, I wrote some tests.
Next step is to implement better inspection for
- window and document
- objects with recursive links
- functions
Yeah, I actually I saw it yesterday. Glad you find it useful :)
Wanted to point out 1 false-positive that I found if it helps anyone else out. In the this.typeOf function of the library, an array that has been treated like an object can sometimes be flagged as a node-list. To workaround this, consider changing
obj.item ? 'nodelist' :
to...
obj.item && typeof(obj.item) == 'function' ? 'nodelist' :
Post a Comment To get help prepare a demo.