“prettyPrint” for JavaScript

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!