https://github.com/alorel/console-log-html
Adds console log output to the screen
https://github.com/alorel/console-log-html
console-log html logger
Last synced: 11 months ago
JSON representation
Adds console log output to the screen
- Host: GitHub
- URL: https://github.com/alorel/console-log-html
- Owner: Alorel
- License: lgpl-3.0
- Created: 2016-05-01T17:32:05.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-03-08T09:05:29.000Z (over 7 years ago)
- Last Synced: 2025-08-05T02:52:21.532Z (11 months ago)
- Topics: console-log, html, logger
- Language: CSS
- Homepage: https://alorel.github.io/console-log-html
- Size: 928 KB
- Stars: 34
- Watchers: 5
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A tiny library that overrides the browser's `console.*` functions allowing the logged messages to be displayed in HTML.
[](https://coveralls.io/github/Alorel/console-log-html?branch=master)
[](https://travis-ci.org/Alorel/console-log-html)
[](https://david-dm.org/alorel/console-log-html#info=dependencies&view=list)
[](https://david-dm.org/alorel/console-log-html#info=devDependencies&view=list)
[](https://www.npmjs.com/package/console-log-html)
Migrating from `1.x` to `2.0`? See [MIGRATING.md](https://github.com/Alorel/console-log-html/blob/master/MIGRATING.md)
# Installation:
Simply include the file on your page:
```html
```
It can also be included as a dependency from [npm](https://www.npmjs.com/package/console-log-html):
```
npm install console-log-html --save
```
```javascript
(function(){ // Your closure
var ConsoleLogHTML = require('console-log-html');
})();
```
# Usage:
```html
ConsoleLogHTML.connect(document.getElementById("myULContainer")); // Redirect log messages
ConsoleLogHTML.disconnect(); // Stop redirecting
```
You can also instruct the script to only log to the console by passing a second argument to `console.*()`, e.g.:
```javascript
console.log("foo"); // Logs "foo" to HTML
console.log("Look, some JSON:", {foo: 'bar'}); // Logs "Look, some JSON: Object {"foo":"bar"}" to HTML
console.skipHtml.log("bar"); // Logs only to the console
```
## Customisation
### Default styles
The default css classes can be overriden in `ConsoleLogHTML.DEFAULTS`:
```javascript
ConsoleLogHTML.DEFAULTS.error = "some-error-css-class"; // Will be applied to console.error()
ConsoleLogHTML.DEFAULTS.log = "another-override"; // Will be applied to console.log()
```
### During connect()
The connect method has the following signature:
```javascript
function connect(target, options, includeTimestamp, logToConsole, appendAtBottom){}
```
- `target` has already been covered - it's the <ul> element
- `options` allows you to override the css classes in `ConsoleLogHTML.DEFAULTS` for the duration of the `connect`, i.e. it
would not save the values. For example, if you wanted to override the `log` and `warn` CSS classes you could pass the object
```json
{
"warn": "my-warn-css-class",
"log": "my-log-css-class"
}
```
- `includeTimestamp` - when set to `true` (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
```javascript
(new Date()).toLocaleTimeString()
```
- `logToConsole` - when set to `true` (the default value), appear both in the console *and* the <ul>; when set
to `false`, they appear only in the <ul>.
- `appendAtBottom` - when set to `true` (default=`false`), log messages will be appended at the end of the <ul>-list.
----------
More information:
- [Demo](https://alorel.github.io/console-log-html)
- [API documentation](https://alorel.github.io/console-log-html/jsdoc)
- [Test coverage](https://coveralls.io/github/Alorel/console-log-html?branch=master)