jsprint - console.log on steroids



How does it work?

Link to the 4kb minified file, and you can start printing. Bootstrap will be automagically loaded for the fancy formatting.

//brigand.github.io/jsprint/build/output/jsprint.min.js
<script src="//brigand.github.io/jsprint/build/output/jsprint.min.js"></script>
Try it on CodePen

API

jsprint(thing <String|Number|Object|Array>)

Pass nearly anything as the first parameter. Strings and numbers are printed simply as-is in a pre-tag.

Arrays are printed in a list.

Objects, including class instances are passed to JSON.stringify with prettyprinting if your browser supports it.

The title will be the constructor name. Examples include String, Number, Array, Object, Date.


jsprint(title <String>, thing <String|Number|Object|Array>)

Like the above, but with a custom title, instead of the constructor name.


jsprint(function <Function>, arg1 <String|Number|Object|Array>, arg2 <String|Number|Object|Array>...)

Functions can be used interactivity.

Specify each argument, and their type will attempt to be preserved. This works for numbers, strings, simple objects, and arrays (JSON encoding required). See advanced functions for more detail.


jsprint(title <String>, function <Function>, arg1 <String|Number|Object|Array>, arg2 <String|Number|Object|Array>...)

Same as regular functions, but with a custom title instead of the function's name.


Advanced Stuff


Advanced Functions

If we need a function that deals with class instances, it's best to create a function specifically for jsprint. For example, consider this point class.

function Point(x,y){
    this.x = x; this.y = y;
}

Point.prototype.abs = function(){
    return new Point(Math.abs(this.x), Math.abs(this.y));
}

We want to show off our abs function. To do this, We create a PointAbsTest function, and pass that to jsprint.

function PointAbsTest(x, y) {
    return new Point(x, y).abs();
}

jsprint(PointAbsTest, -50, 30);