JavaScript 除錯

程式碼除錯

程式設計程式碼可能包含語法錯誤或邏輯錯誤。

其中許多錯誤都難以診斷。

通常，當程式設計程式碼包含錯誤時，什麼也不會發生。沒有錯誤訊息，您也無法知道在哪裡查詢錯誤。

搜尋（並修復）程式設計程式碼中的錯誤稱為程式碼除錯。

JavaScript 偵錯程式

除錯並不容易。但幸運的是，所有現代瀏覽器都內建了 JavaScript 偵錯程式。

內建偵錯程式可以開啟和關閉，強制將錯誤報告給使用者。

使用偵錯程式，您還可以設定斷點（程式碼執行可以停止的地方），並在程式碼執行時檢查變數。

通常（否則請遵循本頁底部的步驟），您可以使用 F12 鍵在瀏覽器中啟用除錯，並在偵錯程式選單中選擇“Console”（控制檯）。

console.log() 方法

如果您的瀏覽器支援除錯，您可以使用 console.log() 在偵錯程式視窗中顯示 JavaScript 值。

設定斷點

在偵錯程式視窗中，您可以在 JavaScript 程式碼中設定斷點。

在每個斷點處，JavaScript 將停止執行，讓您檢查 JavaScript 值。

檢查完值後，您可以恢復程式碼的執行（通常使用播放按鈕）。

debugger 關鍵字

debugger 關鍵字會停止 JavaScript 的執行，並呼叫（如果可用）除錯函式。

這與在偵錯程式中設定斷點具有相同的功能。

如果沒有可用的偵錯程式，debugger 語句將不起作用。

當開啟偵錯程式時，此程式碼將在執行第三行之前停止執行。

主要瀏覽器的除錯工具

通常，您可以使用 F12 鍵在瀏覽器中啟用除錯，並在偵錯程式選單中選擇“Console”（控制檯）。

否則，請遵循以下步驟：

Chrome

• 開啟瀏覽器。
• 從選單中選擇“更多工具”。
• 從工具中選擇“開發者工具”。
• 最後，選擇 Console（控制檯）。

Firefox

• 開啟瀏覽器。
• 從選單中選擇“Web Developer”（Web 開發者）。
• 最後，選擇“Web Console”（Web 控制檯）。

Edge

• 開啟瀏覽器。
• 從選單中選擇“Developer Tools”（開發者工具）。
• 最後，選擇 Console（控制檯）。

Opera

• 開啟瀏覽器。
• 從選單中選擇“Developer”（開發者）。
• 從“Developer”（開發者）中，選擇“Developer tools”（開發者工具）。
  
• 最後，選擇 Console（控制檯）。

Safari

• 轉到 Safari，在主選單中選擇 Preferences（偏好設定），然後選擇 Advanced（高階）。
• 勾選“Enable Show Develop menu in menu bar”（啟用在選單欄中顯示開發選單）。
• 當選單中出現新選項“Develop”（開發）時，
  選擇“Show Error Console”（顯示錯誤控制檯）。

您知道嗎？