CODEWITHSUNDEEP
javascriptdebuggingconsole
John
John

Reputation: 3946

Sending all Javascript console output into a DOM element

How does one send all console output into a DOM element so it can be viewed without having to open any developer tools? I'd like to see all output, such as JS errors, console.log() output, etc.

Upvotes: 18

Views: 15956

Answers (4)

Max Nanasy
Max Nanasy

Reputation: 6121

You could use for example https://github.com/serapath/dom-console or https://github.com/dfkaye/dom-console, which do this

Upvotes: 0

Damjan Pavlica
Damjan Pavlica

Reputation: 33943

Simple console.log redefinition, without error handling:

  const originalConsoleLog = console.log
  console.log = (...args) => {
    args.map(arg => document.querySelector("#mylog").innerHTML += arg + '<br>')
  }
  console.log = originalConsoleLog

Upvotes: 1

Craig McKeachie
Craig McKeachie

Reputation: 1704

I found the accepted answer above helpful but it does have a couple issues as indicated in the comments:

1) doesn't work in Chrome because "former" does not take into account the this context no long being the console, the fix is to use the JavaScript apply method.

2) It does not account for multiple arguments being passed to console.log

I also wanted this to work without jQuery.

    var baseLogFunction = console.log;
    console.log = function(){
        baseLogFunction.apply(console, arguments);

        var args = Array.prototype.slice.call(arguments);
        for(var i=0;i<args.length;i++){
            var node = createLogNode(args[i]);
            document.querySelector("#mylog").appendChild(node);
        }

    }

    function createLogNode(message){
        var node = document.createElement("div");
        var textNode = document.createTextNode(message);
        node.appendChild(textNode);
        return node;
    }

    window.onerror = function(message, url, linenumber) {
        console.log("JavaScript error: " + message + " on line " +
            linenumber + " for " + url);
    }

Here is an updated working example with those changes. http://jsfiddle.net/eca7gcLz/

Upvotes: 26

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

This is one approach for a quick solution:

Javascript

var former = console.log;
console.log = function(msg){
    former(msg);  //maintains existing logging via the console.
    $("#mylog").append("<div>" + msg + "</div>");
}

window.onerror = function(message, url, linenumber) {
    console.log("JavaScript error: " + message + " on line " + 
            linenumber + " for " + url);
}

HTML

<div id="mylog"></div>

Working Example http://jsfiddle.net/pUaYn/2/

Upvotes: 14

Related Questions