在頁面內的div中顯示控制檯錯誤和警報

Question

我正在爲我的web應用程序構建一個調試工具，我需要在div中顯示控制檯錯誤。我知道我可以使用我自己製作的控制檯（如對象）並使用它，但爲了將來使用，我需要將所有控制檯錯誤發送到窗口。其實我想捕捉控制檯事件。

Answer 1

爲了保持控制檯工作：

if (typeof console != "undefined") 
    if (typeof console.log != 'undefined') 
     console.olog = console.log; 
    else 
     console.olog = function() {}; 

console.log = function(message) { 
    console.olog(message); 
    $('#debugDiv').append('<p>' + message + '</p>'); 
}; 
console.error = console.debug = console.info = console.log 

Answer 2

怎麼樣簡單的東西：

console.log = function(message) {$('#debugDiv').append('<p>' + message + '</p>');}; 
console.error = console.debug = console.info = console.log 

Answer 3

下面是使用封閉的方式，包含在新的範圍舊控制檯日誌功能。

console.log = (function (old_function, div_log) { 
    return function (text) { 
     old_function(text); 
     div_log.value += text; 
    }; 
} (console.log.bind(console), document.getElementById("error-log"))); 

Answer 4

否則，如果你是在保持log，warn和error彼此分開來講，你可以做這樣的事情（改編自MST的答案）：

var log = document.querySelector('#log'); 

['log','warn','error'].forEach(function (verb) { 
    console[verb] = (function (method, verb, log) { 
     return function (text) { 
      method(text); 
      // handle distinguishing between methods any way you'd like 
      var msg = document.createElement('code'); 
      msg.classList.add(verb); 
      msg.textContent = verb + ': ' + text; 
      log.appendChild(msg); 
     }; 
    })(console[verb].bind(console), verb, log); 
}); 

其中#log是你的HTML元件。變量verb是'log','warn'或'error'之一。然後，您可以使用CSS以可區分的方式設置文本的樣式。請注意，許多此代碼與舊版本的IE不兼容。

Answer 5

這裏沒有答案考慮控制檯消息傳遞多個參數。例如。 console.log("Error:", "error details")）。

替換默認日誌函數的函數更好地考慮所有函數參數（例如，通過使用arguments對象）。下面是一個例子：

console.log = function() { 
    log.textContent += Array.prototype.slice.call(arguments).join(' '); 
} 

（該Array.prototype.slice.call(...)簡單地轉換arguments對象到一個數組，因此它可以容易地與join()被級聯。）

當原始日誌應保持工作，以及：

console.log = (function (old_log, log) { 
    return function() { 
     log.textContent += Array.prototype.slice.call(arguments).join(' '); 
     old_log.apply(console, arguments); 
    }; 
} (console.log.bind(console), document.querySelector('#log'))); 

完整的解決方案：

var log = document.querySelector('#log'); 
['log','debug','info','warn','error'].forEach(function (verb) { 
    console[verb] = (function (method, verb, log) { 
     return function() { 
      method.apply(console, arguments); 
      var msg = document.createElement('div'); 
      msg.classList.add(verb); 
      msg.textContent = verb + ': ' + Array.prototype.slice.call(arguments).join(' '); 
      log.appendChild(msg); 
     }; 
    })(console[verb], verb, log); 
}); 

（一個用多個參數發送消息的框架的例子是Video.js。但肯定有許多其他的）

編輯：。多個參數的另一個用途是控制檯的格式設置功能（如console.log("Status code: %d", code)