掌握 JavaScript 調試：新手必備的技巧

JavaScript 中的偵錯涉及透過分析執行時間行為、追蹤程式流程以及使用瀏覽器控制台、偵錯器和日誌記錄技術等工具來識別和修復錯誤。以下是 JavaScript 中調試的各種方法。
1.使用偵錯器關鍵字
debugger 關鍵字強制 JavaScript 引擎在某個點停止執行。當遇到時，它會暫停程式碼執行並開啟瀏覽器的調試工具。
文法：
調試器；
範例：

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

這允許您使用瀏覽器的開發工具在該確切點檢查變數和程式狀態。
2.使用 console.log()
console.log() 將資料輸出到瀏覽器的控制台，幫助您在執行時追蹤值和程式流程。
文法：

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

透過在程式碼中放置 console.log() 語句，您可以驗證變數是否包含預期值。
3.使用斷點
可以直接在瀏覽器的開發人員工具中設定斷點。它們在特定行停止程式碼執行，讓您可以檢查當時的程式狀態。
設定斷點的步驟：

1. 開啟開發者工具（按 F12 或右鍵並選擇「檢查」）。
2. 前往「來源」標籤。
3. 選擇 JavaScript 文件，然後按一下行號設定斷點。
4. 程式碼執行將在該行暫停，並且可以檢查所有變數和狀態。 範例：

function multiply(a, b) { 
   return a * b; 
} 

令結果 = 乘法(2, 5);
// 在這裡設定斷點並檢查值
在此範例中，在 multiply() 函數上設定斷點後，您可以在開發者工具中檢查 a 和 b 的值。
4.使用 console.warn() 和 console.error()
這些方法的工作方式類似於 console.log()，但輸出在控制台中在視覺上是不同的，有助於區分警告或錯誤。
文法：

console.warn(message); 
console.error(message);

範例：

let age = 17; 

if (age < 18) { 
   console.warn("Warning: User is underage."); 
} else { 
   console.log("User is an adult."); 
} 

if (age < 0) { 
   console.error("Error: Age cannot be negative."); 
}

在這種情況下，console.warn() 將顯示黃色警告訊息，而 console.error() 將顯示紅色錯誤。
5.使用 try...catch 語句
try…catch 用於優雅地處理執行階段錯誤，​​讓您可以記錄錯誤並防止應用程式崩潰。
文法：

try { 
   // Code that may throw an error 
} catch (error) { 
   console.error(error.message); 
} 

範例：

function sum(a, b) { 
   debugger; // Execution stops here 
   return a + b; 
} 

let result = sum(5, 10); 
// When run, code will pause at the debugger line

try…catch 區塊將捕獲 JSON 解析錯誤並將其記錄到控制台，而不會導致應用程式崩潰。
6.使用效能監控工具
對於效能調試，開發者工具中的「效能」標籤可協助監控函數執行時間、記憶體使用情況和效能瓶頸。
步驟：

1. 開啟開發者工具（按 F12）。
2. 轉到「效能」標籤。
3. 點選「記錄」開始監控程式碼執行。
4. 在應用程式中執行操作來收集資料。
5. 停止錄製以分析效能時間軸。 範例：

console.log(value)
Example:
let name = "John"; 
let age = 30; 

console.log("Name: " + name); 
// Output: Name: John 
console.log("Age: ", age); 
// Output: Age: 30

此範例使用 console.time() 和 console.timeEnd() 來測量一段程式碼的執行時間。
透過應用這些方法和效能監控等更先進的技術，您可以有效地調試和解決 JavaScript 程式碼中的問題。

如果您正在學習 JavaScript，請務必按照我在 Medium 上的逐步教學進行操作：https://medium.com/@CodingAdventure

以上是掌握 JavaScript 調試：新手必備的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！