README
@actualwave/dom-console
Small UI helper to display console output on the page. I've made it just to make nice demos.
// create container for messages in <body/>
const Msg = DOMConsole.create(document.body);
// use its methods to display messages
Msg.info('Something here:', 'anything else');
Msg.log(1, 2, 3, true, Symbol('abc-def'));
Msg.warn(new Date());
Msg.log(window.location);
Msg.error(new Error('Something bad happened'));
All the styles in console.css
file.
It does not dig into prototype chain and displays only own properties of the object.
DOM Console is based on Log Data Renderer
and it uses renderer under the hood to extract from passed values a set of valuable information(JSON-friendly) and then display it.
I needed to display raw data coming from Log Data Renderer as is and added a new method pushRendered(type, ...content)
which can be used to display such data. Using it you can render data somewhere else and send to the console in JSON-friendly format.
Nesting
By default DOMConsole parses objects 2 levels deep, then it will just get their
String representations(which is [object Object] by default). To check or change
maximum level, use functions getMaxNesingDepth()
and setMaxNesingDepth()
respectively.
CDN
To use on platform like jsfiddle.net, add these files: Using UNPKG:
- https://unpkg.com/@actualwave/dom-console@latest/console.css
- https://unpkg.com/@actualwave/dom-console@latest/console.js
Using GitHub as CDN:
- https://rawgit.com/burdiuz/js-dom-console/master/console.css
- https://rawgit.com/burdiuz/js-dom-console/master/console.js
Install
It can be installed from NPM
npm install @actualwave/dom-console
using yarn
yarn add @actualwave/dom-console
TODOs
- Add display for HTML nodes/elements(via outerHTML).