Skip to content
Adds console log output to the screen
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

A tiny library that overrides the browser's console.* functions allowing the logged messages to be displayed in HTML.

Coverage Status Build Status Deps Deps


Migrating from 1.x to 2.0? See


Simply include the file on your page:

<script type="application/javascript" src="console-log-html.min.js"></script>
<!-- Or, alternatively, use the CDN URL -->
<script type="application/javascript" src="//"></script>

It can also be included as a dependency from npm:

npm install console-log-html --save
(function(){ // Your closure
    var ConsoleLogHTML = require('console-log-html');


    <ul id="myULContainer"></ul> <!-- I will hold the log messages -->
    <script type="application/javascript" src="console-log-html.min.js"></script>
        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.:

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


Default styles

The default css classes can be overriden in ConsoleLogHTML.DEFAULTS:

    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:

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
     "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
(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:

You can’t perform that action at this time.