第二十四天：錯誤處理與調試

1. 常見的錯誤類型

在 JavaScript 中，錯誤通常分為幾種類型：

• 語法錯誤（Syntax Errors）：當代碼的語法不正確時，通常在執行之前就會被檢查出來。例如，缺少括號或分號。

  console.log("Hello world // 語法錯誤，缺少閉合的引號

• 運行時錯誤（Runtime Errors）：代碼語法正確，但在執行過程中出現問題。例如，引用了一個不存在的變數。

  console.log(x); // 運行時錯誤，變數 x 未定義

• 邏輯錯誤（Logic Errors）：代碼可以正常執行，但它的行為不符合預期，這通常是由於設計上的錯誤或錯誤的邏輯。

2. 錯誤處理的方式

try/catch 語句

try/catch 是 JavaScript 中處理運行時錯誤的常用方式。當代碼在 try 區塊中拋出錯誤時，catch 區塊會捕捉到這個錯誤，並防止程序崩潰。

範例：

try {
let result = someUndefinedFunction(); // 此處將會拋出錯誤
} catch (error) {
console.error("發生錯誤：", error.message); // 捕捉並處理錯誤
}

自訂錯誤處理

有時候你可能會希望根據應用程序的需求自訂錯誤，這時可以使用 throw 語句來手動拋出錯誤。

function checkAge(age) {
if (age < 18) {
throw new Error("年齡必須大於或等於 18 歲");
}
console.log("允許進入");
}

try {
checkAge(16); // 這將會拋出錯誤
} catch (error) {
console.error(error.message); // 顯示錯誤信息
}

3. 調試工具

1. console.log()

console.log() 是最常見的調試方法。它允許你在控制台中輸出變量的值或代碼執行的狀態，便於追蹤程序的流程。

let name = "John";
console.log("變量值:", name); // 控制台會顯示：變量值: John

2. 使用瀏覽器的開發者工具

現代瀏覽器（如 Chrome 和 Firefox）都提供強大的開發者工具，你可以在其中調試 JavaScript 代碼。以下是一些常用的功能：

• 設置斷點：你可以在代碼的特定行設置斷點，讓程序執行到該行時暫停，並查看當前的變量值。

  步驟：

  1. 打開開發者工具（通常是按 F12 或 Ctrl+Shift+I）。
  2. 選擇 "Sources" 面板。
  3. 在代碼的某行點擊行號設置斷點。

• 調試模式：當代碼執行到斷點處時，你可以逐步執行每一行代碼，並檢查每個步驟中的變量值。

3. debugger 關鍵字

debugger 關鍵字可以用來在代碼的特定位置強制啟動調試工具。

let x = 5;
debugger; // 代碼執行到這裡會暫停，並打開瀏覽器的調試工具
let y = 10;
console.log(x + y);

4. 錯誤追蹤

在調試中，查看錯誤的堆疊追蹤（Stack Trace）可以幫助你快速找到錯誤的來源。

function firstFunction() {
secondFunction();
}

function secondFunction() {
thirdFunction();
}

function thirdFunction() {
throw new Error("這裡發生了錯誤");
}

try {
firstFunction();
} catch (error) {
console.error(error.stack); // 顯示錯誤的堆疊追蹤
}

4. 錯誤處理策略

在實際應用中，我們通常採用以下幾種錯誤處理策略：

• 防止錯誤崩潰應用程序：使用 try/catch 捕捉潛在的運行時錯誤，並給用戶提供友好的錯誤信息，而不是讓應用程序崩潰。

• 日誌記錄：將錯誤詳細信息記錄到日誌中，便於後續進行錯誤分析。這在生產環境中特別重要，可以幫助你發現和解決用戶遇到的問題。

• 回退機制：在某些情況下，你可以實施回退機制。例如，當 API 請求失敗時，可以嘗試再次請求或提供本地數據作為替代方案。

範例：
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');

if (!response.ok) {
  throw new Error('網絡錯誤');
}

let data = await response.json();
console.log("數據獲取成功：", data);

} catch (error) {
console.error("請求失敗，嘗試使用本地數據：", error);
let localData = { name: "Local Data" };
console.log("本地數據：", localData);
}
}

fetchData();