資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何除錯 JavaScript 程式？
在任何程式語言中進行程式設計時，在邏輯構建或遵循語言的語法規則方面犯錯誤是很常見的，這會導致錯誤的形成以及我們的程式碼無法按預期執行所有任務。在本文中，我們將學習如何找到這些錯誤的確切位置以及如何修復這些錯誤以使我們的程式碼按預期工作。查詢程式碼中的錯誤然後修復這些錯誤的過程稱為除錯。
除錯 JavaScript 程式有多種方法，如下所示：
設定斷點
使用 Debugger 關鍵字
使用 console.log() 方法
現在讓我們藉助示例詳細瞭解每種方法，以便它可以幫助您將來除錯程式。
設定斷點
透過設定斷點來除錯 JavaScript 程式碼的方式是與其他兩種方法相比，一種更好、更高效且更快的除錯方法。透過這種除錯方式，我們可以在我們編寫的程式碼的不同點設定不同的斷點，這將在遇到斷點時停止程式的執行，並允許我們檢查程式碼並對其進行更改，以便最大程度地減少程式碼中的錯誤。
如何設定斷點？
要在程式碼的不同位置設定斷點，請按照以下步驟操作：
在瀏覽器視窗中開啟檢查元素或開發者工具，它看起來如下面的圖片所示：
現在轉到那裡的原始碼選項卡，如上圖所示。
開啟原始碼選項卡後，向下滾動偵錯程式的右側部分，直到您看到DOM 斷點或事件偵聽器斷點。
到達這些選項後，您可以選擇列表中的任何事件偵聽器以設定斷點。當執行過程中發生選定的事件時，它將停止程式碼執行。
另一種在任何點手動設定斷點的方法是在原始碼選項卡的左側視窗中選擇檔名。
然後只需單擊程式碼中的行號即可設定斷點，如下面的圖片所示：
在上圖中，斷點設定在第 20 行。
使用 Debugger 關鍵字
我們可以在程式碼中的任何行或點使用debugger關鍵字。這將停止程式碼的執行並呼叫除錯函式（如果可用），並允許我們檢查 JavaScript 語法和變數以在編寫它們時糾正任何錯誤。完成程式碼的檢查和更正部分後，我們可以進一步移動或繼續執行程式。
語法
可以使用以下語法在程式碼中新增 debugger 關鍵字以在某個點停止程式執行：
JavaScript Statements or code debugger; JavaScript Statements or code
讓我們看一個程式碼示例，其中我們將使用 debugger 關鍵字在特定點或行停止程式執行。
演算法
步驟 1 - 在第一步中，我們將新增一個輸入元素以獲取使用者對其選擇的輸入。
步驟 2 - 在此步驟中，我們將新增一個按鈕元素，並將其與 onclick 事件關聯，稍後在使用者單擊按鈕時呼叫函式。
步驟 3 - 在最後一步中，我們將定義一個 JavaScript 函式，其中包含在經過 debugger 關鍵字定義的一些除錯步驟後在使用者螢幕上顯示輸出的整個邏輯。
示例
以下示例將說明使用 debugger 關鍵字除錯 JavaScript 程式：
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>How to debug JavaScript program?</h2>
<p>Enter a number:</p>
<input type = "number" id = "inp1"> <br> <br>
<button id = "btn" onclick = "display()">See Result</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
function display() {
var inp1 = document.getElementById('inp1');
debugger;
var number1 = inp1.value;
debugger;
result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
}
</script>
</body>
</html>
在上述示例的輸出中，我們可以看到，當我們嘗試在原始碼選項卡中除錯程式碼時，程式的執行會在遇到 debugger 關鍵字時自動停止，並允許我們根據需要對程式進行更改。否則，它將繼續執行程式。在除錯時，它不會在使用者螢幕上顯示任何內容，因為程式執行在中間停止了。
使用 console.log() 方法
console.log()是一種用於在瀏覽器控制檯視窗中顯示 JavaScript 變數的值以檢查其正確性的方法。它將幫助我們為給定的問題編寫具有合適邏輯的乾淨程式碼，並使程式按預期執行。我們可以在此方法的括號內傳遞我們想要在控制檯視窗中列印的變數。
語法
以下語法可用於使用 console.log() 方法除錯 JavaScript 程式碼：
console.log(parameter);
讓我們瞭解一下使用 console.log() 方法除錯以下示例 JavaScript 程式。
演算法
此程式和上述程式的演算法幾乎相同。您需要將上述程式或演算法中的 debugger 關鍵字替換為 console.log() 方法，並在其中傳遞一些引數或值。
示例
以下示例將向您解釋在除錯 JavaScript 程式碼時使用 console.log() 方法的全部內容：
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>How to debug JavaScript program?</h2>
<p>Enter a number:</p>
<input type = "number" id = "inp1"><br> <br>
<button id = "btn" onclick = "display()">See Result</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
function display() {
var inp1 = document.getElementById('inp1');
var number1 = inp1.value;
console.log(number1);
result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
}
</script>
</body>
</html>
在上述程式碼的輸出影像中，如果 console.log() 方法在控制檯視窗中列印的值每次都與您輸入的值相同，則程式碼按預期工作，並且程式碼中不會出現任何錯誤。但是，如果值不同或控制檯中未列印任何內容，則需要分析程式碼並進行必要的更改或需要除錯。
在本文中，我們已經看到了三種不同的 JavaScript 程式除錯方法，以編寫乾淨且無錯誤的程式碼，以便程式碼能夠按預期工作，並且不會執行任何任務失敗。這三種方法已在程式碼示例中進行了詳細討論。
237 次檢視
