Those of you following me on Github may have noticed a recently added project called “prettyPrint“.

“prettyPrint” is an in-browser JavaScript “variable dumper” similar to ColdFusions’s cfdump . It enables you to print out an object of any type in table format for viewing during debugging sessions. In combination with Firebug, “prettyPrint” will make you the best-equipped JavaScript debugger on earth! (not guaranteed)

Some of its key features:

Entirely independent. It requires NO StyleSheets or images.

Handles infinitely nested objects.

All native JavaScript types are supported plus DOM nodes/elements!

Protects against circular/repeated references.

Allows you to specify the depth to which the object will be printed.

Better browser users benefit from gradient column-headers! Thanks to HTML5 and CANVAS !

! Allows low-level CSS customisation (if such a thing exists).

Fully validated with JSLint!

I’ve recorded a short screencast demonstrating a couple of prettyPrint’s features:

“prettyPrint” is entirely independent. As mentioned, it requires NO StyleSheets or images. All styles are applied directly (inline) and are customizable via the exposed config object ( prettPrint.config.styles ).

See the demonstration »

Using it is simple enough:

var table = prettyPrint ( anyRandomThing , { /*optional options object */ } ) ; // Making the table viewable is down to you... // e.g. document. body . appendChild ( table ) ;

For more information visit the project’s page on Github!

PS. I’m aware that there’s an already existing “port” of ColdFusion’s cfdump – I only created my one as a personal exercise; plus none of the ones I’ve seen so far have depth control or protection against circular references. 😉

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!