A tiny library that overrides the browser's console.*
functions allowing the logged messages to be displayed in HTML.
Migrating from 1.x
to 2.0
? See MIGRATING.md
Installation:
Simply include the file on your page:
<!-- Or, alternatively, use the CDN URL -->
It can also be included as a dependency from npm:
npm install console-log-html --save
{ // Your closure var ConsoleLogHTML = ;};
Usage:
<!-- I will hold the log messages -->
You can also instruct the script to only log to the console by passing a second argument to console.*()
, e.g.:
console; // Logs "foo" to HTMLconsole; // Logs "Look, some JSON: Object {"foo":"bar"}" to HTMLconsoleskipHtml; // Logs only to the console
Customisation
Default styles
The default css classes can be overriden in ConsoleLogHTML.DEFAULTS
:
ConsoleLogHTMLDEFAULTSerror = "some-error-css-class"; // Will be applied to console.error() ConsoleLogHTMLDEFAULTSlog = "another-override"; // Will be applied to console.log()
During connect()
The connect method has the following signature:
{}
target
has already been covered - it's the <ul> elementoptions
allows you to override the css classes inConsoleLogHTML.DEFAULTS
for the duration of theconnect
, i.e. it would not save the values. For example, if you wanted to override thelog
andwarn
CSS classes you could pass the object
includeTimestamp
- when set totrue
(the default value), a timestamp will be prepended to each message as it appears in the <ul>. The timestamp's format depends on the user as it is created via
logToConsole
- when set totrue
(the default value), appear both in the console and the <ul>; when set tofalse
, they appear only in the <ul>.appendAtBottom
- when set totrue
(default=false
), log messages will be appended at the end of the <ul>-list.
More information: