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.

License

MIT

Copyright (c) 2022, UmamiAppearance