Thursday, May 15, 2008

jsDump - Pretty dump of any Javascript data

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).
To modify these settings, just do (f.e):
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.

Links

Downloads

13 comments:

Unknown said...

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/

Ariel Flesler said...

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 ?

Unknown said...

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.

Ariel Flesler said...

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.

Anonymous said...

would be nice to have also the ability to pass several arguments into dumo

Ariel Flesler said...

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 ?

Unknown said...

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!

Anonymous said...

A have created a similar function - dump()

Ariel Flesler said...

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

Nikita Vasilyev said...

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

Nikita Vasilyev said...

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

Ariel Flesler said...

Yeah, I actually I saw it yesterday. Glad you find it useful :)

Chad said...

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