Contodo NPM | npm.io

contodo

HTML Console. Let's you output your browser console to a document node.

Installation

GitHub

git clone https://github.com/UmamiAppearance/contodo.git

npm

nmp install contodo

Builds

Builds can be found in the directory dist (github:dist).

If you want to build your own copy run:

npm run build

You have two builds available (esm and iife), plus a minified version of each.

contodo.esm.js
contodo.esm.min.js
contodo.iife.js
contodo.iife.min.js

Also in subfolder no-style (github:dist/no-style), there are builds available without build in css.

Usage

First either import the esm-module or add the iife script tag to the HTML page. After that, the constructor ConTodo is available and ready to use:

ES6

<script type="module">
    import ConTodo from "./<path>/contodo.esm.min.js";
    document.addEventListener("DOMContentLoaded", () => {
        const contodo = new ConTodo();
    });
</script>

CDN (jsdelivr)

<script type="module">
    import ConTodo from "https://cdn.jsdelivr.net/npm/contodo@latest/dist/contodo.esm.min.js;
    document.addEventListener("DOMContentLoaded", () => {
        const contodo = new ConTodo();
    });
</script>

IIFE

<script src="./<path>/contodo.iife.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const contodo = new ConTodo();
    });
</script>

CDN (jsdelivr)

<script src="https://cdn.jsdelivr.net/npm/contodo@latest/dist/contodo.iife.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const contodo = new ConTodo();
    });
</script>

Demo

A demo can be found here.

On your local machine, you can run npm install once and then npm start to open the demo page.

Options

new ConTodo(node[, options])

`node`

Type: Object
Default: null

Pass a document node on which contodo should be attached to. If nothing or a nullish value is passed, the console gets attached to to the document body.

`options`

Type: Object
Default: {}

key	type	default	effect
applyCSS	Boolean	`true`	applies the build in css to the document
autostart	Boolean	`true`	initializes and attaches the console automatically
catchErrors	Boolean	`false`	displays errors inside of the console node
clearButton	Boolean	`false`	adds a clickable anchor tag, to clear the console
height	String (css-value)	`"inherit"`	css value for style height of the console node
maxEntries	Number	`0`	removes older entries if the given value (>0) is reached
preventDefault	Boolean	`false`	prevents logging to the internal console
reversed	Boolean	`false`	lets the most recent log appear at the top
showDebugging	Boolean	`true`	displays `console.debug` messages
showTimestamp	Boolean	`false`	adds a timestamp to every log
width	String (css-value)	`"inherit"`	css value for style width of the console node

Methods

`createDocumentNode`

Creates the main document node and appends it to the provided node or the document body, if nothing is provided.
The method is called during initialization if the option autostart is set.
If the build in css is available and the option applyCSS is set to true, method applyCSS is getting additionally called.

`destroyDocumentNode`

Destroys the main node. Also resets the browser console to its default state by calling restoreDefaultConsole.

`initFunctions`

Replaces default console methods with the contodo methods. The method is called during initialization if the option autostart is set.

`restoreDefaultConsole`

Resets the browser console to its default state.

`applyCSS`

Applies the build in CSS to the document header (if available and not already applied). This method is automatically getting called by createDocumentNode.

`removeCSS`

Removes former applied build in css.

API

A contodo object holds an api object, which directly accesses the console-methods. Those methods are equivalent to the methods of the build in browser console.

Default console access

After running restoreDefaultConsole the default methods of the console are restored. It is however sometimes necessary to access the default console, while a contodo instance is active. For this case you have access to the default methods at window._console.

Api Reference

Apart from console.dir/dirxml and console.group contodo has all methods of a browsers console available. A reference of those methods can be found here.

Themes

Themes can be found here. Right now there is only the default and a dark theme available, but feel free to make one if you don't like the designs. The default is baked into the build file. Attaching it to the document body can be disabled by passing the option applyCSS: false. Also there are builds available without build in css.
If you like to build your own copy of contodo with custom css included, modify the default.css before building.