Gửi tất cả đầu ra bảng điều khiển Javascript vào phần tử DOM

Question

Làm cách nào để gửi tất cả đầu ra bàn điều khiển thành phần tử DOM để có thể xem mà không phải mở bất kỳ công cụ nhà phát triển nào? Tôi muốn xem tất cả các đầu ra, chẳng hạn như lỗi JS, console.log() đầu ra vv

Answer 1

Tôi tìm thấy câu trả lời được chấp nhận trên hữu ích nhưng nó có một vài vấn đề như đã nêu trong các ý kiến:

1) không hoạt động trong Chrome vì "cựu" không đưa vào tài khoản các bối cảnh này không còn là giao diện điều khiển nữa, sửa chữa là sử dụng phương thức áp dụng JavaScript.

2) Nó không tính đến nhiều đối số được chuyển đến console.log

Tôi cũng muốn điều này hoạt động mà không cần 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); 
    } 

Đây là ví dụ làm việc được cập nhật với những thay đổi đó. http://jsfiddle.net/eca7gcLz/

Answer 2

Đây là một cách tiếp cận cho một giải pháp nhanh chóng:

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> 

Ví dụ làm việchttp://jsfiddle.net/pUaYn/2/

Answer 3

Simple console.log định nghĩa lại, mà không xử lý lỗi:

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