padolsey-archive/prettyprint.js

An in-browser JavaScript variable dumper, similar in functionality to ColdFusion's cfdump tag.

prettyPrint.js

© James Padolsey

prettyPrint.js is an in-browser JavaScript variable dumper, similar in functionality to ColdFusion's cfdump tag.

First, a preview:

Preview:

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

Usage:

Download prettyPrint.js and include it in your document:

<script src="prettyPrint.js"></script>

Whenever you want to pretty-print an object of any type simple call prettyPrint:

prettyPrint( myObject );

That, on its own, won't do anything though; prettyPrint returns a table which you can handle in any way you desire. For example, if you wanted to insert the table at the very top of the document:

var tbl = prettyPrint( myObject );
document.body.insertBefore( tbl, document.body.firstChild );

Or, appending it to the document:

document.body.appendChild(tbl);

Configuration:

Custom settings can be passed (as an object) as the second argument to the prettyPrint() function:

prettyPrint(myFoo, {
	// Config
	maxArray: 20, // Set max for array display (default: infinity)
	expanded: false, // Expanded view (boolean) (default: true),
	maxDepth: 5 // Max member depth (when displaying objects) (default: 3)
})

tip: Scroll to line ~679 of prettyprint.js for more configuration options.

prettyprint.js's Issues

How to check ECMAScript6 ／ Map ／ Promise ／ Class

How to detect doing the map object and promise object?

In the present circumstances
Object
[empty]

[enhancement] Add missing bower.json.

Hey, maintainer(s) of padolsey/prettyPrint.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library padolsey/prettyPrint.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "padolsey/prettyPrint.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Feature Request: Add extensibility point to override object value

Feature Request: I would like the ability to modify any object's value. For instance, I've got an object that has an Image property that is holding an image as a base64 encoded string. I would like to turn this value into this:

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYAB..." />

In order to do that, we would need a config option that allows you to specify a function that the library will call to return the innerHtml of each cell. This function of course would need to have some context passed into it so that you could interrogate the particular object and key value pair being evaluated.

Rename "prettyPrint" to "prettyprint" in inclusion code in Usage.

The js file is named - "prettyprint.js" while the inclusion script code in Usage is "prettyPrint.js".

port to be used as a chrome extention

Preview link in readme does 404

https://camo.githubusercontent.com/ed43da36bdd4d8d25ee1f75f6b2d65a333f44cb0/687474703a2f2f696d673133322e696d616765736861636b2e75732f696d673133322f353839302f7072657474797072696e74707265766965772e706e67

expanding tables

This is a really cool project. I like how you can expand tables and reach new depths. In some tables I have too much text to display. Can there be a way to expand a table so that it can display all of the text?

very nice, but when running from XUL need namespace

this thing is super. it should be updated to use gradient rather than data urls for the gradients.

however for firefox, i dump objects to a new tab. i used this, but it was creating the table and the tr would not be a new row. it would be a huge table in one line. i finally figured out the problem.

it was creating a XUL element.

so createElement needs to updated to:
createElementNS('http://www.w3.org/1999/xhtml', type);

HTML escaping in the collapsed view

In the non-expanded view, html entities can cause trouble. While I don't expect that all of them are resolved by this change, it does escape them in the places where I noticed them.

--- prettyprint.js.orig 2013-02-06 19:03:58.000000000 -0800
+++ prettyprint.js  2013-02-07 11:25:18.000000000 -0800
@@ -545,7 +545,7 @@
                }

                var ret = (settings.expanded || hasRunOnce) ? table.node : util.expander(
-                   util.stringify(obj),
+                   util.htmlentities(util.stringify(obj)),
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(table.node);
@@ -600,7 +600,7 @@
                }

                return settings.expanded ? table.node : util.expander(
-                   util.stringify(arr),
+                   util.htmlentities(util.stringify(arr)),
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(table.node);

Add tag for inclusion to cdnjs

Please tag this repo so it can be included in cdnjs

(related pull request)

Is there a live version of the demo?

Multi-Level Object Expand not Functioning

Expanded works great for a few objects, but when you get to say 10 inner levels, all but the last few levels are fully expanded. Is there an easy way to resolve this?