在頁面上顯示JavaScript控制台錯誤

Question

假設我有以下代碼：

<script>

    function billy() {
        alert('muahahahaha!');
    }

    function suzzy() {
        return;
    }

</script>

和這樣的按鈕（帶有未定義的onclick處理程序）：

<input type='button' value='click me' onClick='FRANK()' />

單擊該按鈕時，開發人員控制台中將顯示以下內容：

函數'FRANK（）'未定義。

如何將該消息存儲在變量中並將其顯示在頁面上？

document.getElementById('prompt').innerHTML = log;

所以它看起來像：

<div id='prompt'>
    Function 'FRANK()' has not been defined.
</div>

Answer 1

如果要在div中顯示頁面的任何錯誤，可以使用全局事件處理程序onerror ：

window.onerror = function(e){
  document.getElementById('prompt').innerHTML = e.toString();
}

示范

---

如果您的目標是攔截控制台中瀏覽器寫入的所有內容，而不僅僅是錯誤，我不確定它是否可以直接實現，因為瀏覽器不會使用可訪問的console功能。

但是你可以通過掛鈎所有全局事件處理程序來做很多事情：

示范

Answer 2

我認為@ dystroy的答案就足夠了，但是如果你想要正確的錯誤處理，你應該使用try和catch語句來代替..

演示

function throw_msg() {
    try {
        var a = '';
        alert(b);
    }
    catch(throw_error) {
        document.getElementById('error-box').innerHTML=throw_error.message;
        setTimeout(
            function() {
                document.getElementById('error-box').innerHTML='';
            }, 2000);
    }
}

上述代碼的說明：

我們首先創建一個將在單擊按鈕時調用的函數，並且當您單擊該按鈕時， try塊中的代碼將被執行，如果它有任何錯誤，我們將使用catch語句拋出錯誤，其中使用throw_error.message打印錯誤消息，最后，我們使用setTimeout清除2000的錯誤消息，即2秒