17

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.

John
  • 3,904
  • 7
  • 31
  • 43
  • http://getfirebug.com/firebuglite – SLaks May 17 '13 at 19:46
  • 1
    To get error messages (or at least parse errors), you can use [`window.onerror`](https://developer.mozilla.org/en-US/docs/Web/API/window.onerror). Note that this doesn't get errors related to loading content (images, scripts, Ajax, etc.) Also, it might be not widely supported; I really have no idea. – apsillers May 17 '13 at 19:51

4 Answers4

26

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/

John
  • 3,904
  • 7
  • 31
  • 43
Craig McKeachie
  • 1,704
  • 1
  • 21
  • 25
14

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/

Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
  • Thanks for the answer. I'm getting a `Uncaught TypeError: Illegal invocation` error in your fiddle when using Chrome. Any thoughts as to why? – John May 17 '13 at 22:01
  • 1
    @John because it includes the line: va I wanted to throw an error to show you that it gets caught. – Kevin Bowersox May 18 '13 at 08:14
  • In Chrome I get those errors, and nothing appears in the output. But in Firefox it works fine. I'll have to look into how the consoles are different. Thanks! – John May 19 '13 at 00:02
  • And what about line numbers? Is there any chance to get them? – Ajax Nov 19 '13 at 06:09
  • It is worth noting that this will not work where console.log has multiple arguments: ```console.log("string", [ "array" ], { object: true });``` to get that working do ```former.apply(console, arguments);``` – onmylemon Jul 15 '14 at 17:29
  • "Uncaught TypeError: Illegal invocation" at line number 3 – Omar Tariq Jul 08 '15 at 20:54
  • `former = console.log` detaches the function from its context. It's like doing `function A() {this.doThing = function() {alert(this);}}; var b = new A(); b.doThing(); /* alerts A object */ var c = b.doThing(); c(); /* alerts window */` – Niet the Dark Absol Sep 22 '15 at 13:08
1

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
Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
0

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

Max Nanasy
  • 5,871
  • 7
  • 33
  • 38