資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何捕獲所有 JavaScript 錯誤？
為了捕獲所有 JavaScript 錯誤，我們可以使用 `window.onerror()` 方法，它就像一個全域性的 try-catch 語句。`onerror` 事件處理程式是 JavaScript 中最早用於簡化錯誤處理的功能。每當頁面上發生異常時，就會在 `window` 物件上觸發 `error` 事件。
`onerror` 事件處理程式提供三條資訊來識別錯誤的確切性質：
錯誤資訊 - 瀏覽器針對給定錯誤將顯示的相同訊息
URL - 發生錯誤的檔案
行號 - 給定 URL 中導致錯誤的行號
語法
以下是使用 `window.onerror` 方法捕獲所有 JavaScript 錯誤的語法：
window.onerror = function (event, souce, lineno, colon, error) { }
或
Window.addEventListener( "error" , ( ErrorEvent ) => { })
在這裡我們可以看到兩種語法做的事情相同，但是 `onerror` 接收五個引數，而 `addEventListener` 接收一個引數，該引數包含了 `onerror` 的所有五個屬性，這些屬性如下：
event - 以字串形式描述問題的可讀錯誤訊息。
source - 生成錯誤的指令碼檔案的 URL。它也是字串形式。
lineno - 生成錯誤的指令碼檔案的行號。它是整數格式。
colno - 生成錯誤的指令碼檔案的列號。它是整數格式。
error - 這是丟擲的 Error 物件。
注意：`window.onerror` 只接收五個引數，而對於 `Element.onerror`，我們只接收一個 `ErrorEvent` 物件。
步驟
要使用 `window.onerror` 事件處理程式捕獲所有 JavaScript 錯誤，請按照以下步驟操作：
步驟 1 - 在文字編輯器中開啟您的 HTML 檔案
步驟 2 - 在 HTML 中新增一個元素，您想在其中顯示錯誤訊息。您可以使用帶有 id 屬性的 div 元素，如下所示
步驟 3 - 在 HTML 中新增一個 script 元素並定義 `window.onerror` 事件處理程式函式。每當 JavaScript 程式碼中發生錯誤時，都會呼叫此函式。
步驟 4 - 您可以使用這些引數在 HTML 元素中顯示錯誤詳細資訊。
步驟 5 - 在 HTML 中新增一個按鈕或任何其他元素來觸發錯誤。您可以使用 onclick 事件處理程式來呼叫生成錯誤的函式。
示例：使用 `window.onerror()` 方法
在此示例中，我們建立一個輸入標籤，單擊該輸入標籤時，我們呼叫一個不存在的函式，並使用 `window.onerror` 列印錯誤。
<html>
<head>
<h2> Catching all JavaScript errors using window.onerror </h2>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
<div id = "result"><div>
<script>
window.onerror = function (error, source, lineno, colno, error) {
// Print the error message
let output = document.getElementById("result");
output.innerHTML += "Message : " + error + "<br>";
// Print the url of the file that contains the error
output.innerHTML += "Url : " + source + "<br>";
// Print the line number from which the error generated
output.innerHTML += "Line number : " + lineno + "<br>";
// Print the column number of the error line
output.innerHTML += "Column number : " + colno + "<br>";
// Print he error object
output.innerHTML += "Error Object : " + error;
}
</script>
</body>
</html>
示例 2：使用 `window.addEventListener()` 方法
這與第一個示例相同，但我們使用 `addEventListener` 代替 `onerror`。
<html>
<body>
<h2> Catching all JavaScript errors using addEventListener </h2>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
<div id = "result"></div>
<script>
num = 20;
window.addEventListener("error", (ErrorEvent) => {
let output = document.getElementById("result");
// Print the error message
output.innerHTML += "Message : " + ErrorEvent.message + "<br>";
// Print the url of the file that contains the error
output.innerHTML += "Url : " + ErrorEvent.filename + "<br>";
// Print the line number from which the error generated
output.innerHTML += "Line number : " + ErrorEvent.lineno + "<br>";
// Print the column number of the error line
output.innerHTML += "Column number : " + ErrorEvent.colno + "<br>";
// Print he error object
output.innerHTML += "Error Object : " + ErrorEvent.error;
})
</script>
</body>
</html>
總而言之，要捕獲所有 JavaScript 錯誤，可以使用 `window.onerror` 方法或 `window.addEventListener` 方法。這些方法就像全域性 try-catch 語句，並在 JavaScript 程式碼中發生錯誤時觸發。
11K+ 次檢視
