HTML Console. Let's you output your browser console to a document node.
git clone https://github.com/UmamiAppearance/contodo.gitnmp install contodoBuilds can be found in the directory dist (github:dist).
If you want to build your own copy run:
npm run buildYou have two builds available (esm and iife), plus a minified version of each.
contodo.esm.jscontodo.esm.min.jscontodo.iife.jscontodo.iife.min.js
Also in subfolder no-style (github:dist/no-style), there are builds available without build in css.
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:
<script type="module">
import ConTodo from "./<path>/contodo.esm.min.js";
document.addEventListener("DOMContentLoaded", () => {
const contodo = new ConTodo();
});
</script><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><script src="./<path>/contodo.iife.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const contodo = new ConTodo();
});
</script><script src="https://cdn.jsdelivr.net/npm/contodo@latest/dist/contodo.iife.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const contodo = new ConTodo();
});
</script>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.
new ConTodo(node[, options])
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.
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 |
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.
Destroys the main node. Also resets the browser console to its default state by calling restoreDefaultConsole.
Replaces default console methods with the contodo methods. The method is called during initialization if the option autostart is set.
Resets the browser console to its default state.
Applies the build in CSS to the document header (if available and not already applied). This method is automatically getting called by createDocumentNode.
Removes former applied build in css.
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.
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.
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 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.
Copyright (c) 2022, UmamiAppearance