ES6 - 除錯

---

---

有時，開發人員在編碼過程中會犯錯。程式或指令碼中的錯誤稱為bug（錯誤）。

查詢和修復錯誤的過程稱為除錯，這是開發過程的正常部分。本章介紹可以幫助您完成除錯任務的工具和技術。

IE中的錯誤訊息

追蹤錯誤最基本的方法是開啟瀏覽器中的錯誤資訊。預設情況下，Internet Explorer會在頁面上發生錯誤時在狀態列顯示錯誤圖示。

雙擊此圖示將帶您進入一個對話方塊，其中顯示有關發生的特定錯誤的資訊。

由於此圖示很容易被忽略，因此Internet Explorer允許您在每次發生錯誤時自動顯示錯誤對話方塊。

要啟用此選項，請選擇工具→Internet選項→高階選項卡，然後選中“顯示每個指令碼錯誤的通知”複選框，如下面的螢幕截圖所示。

Firefox或Mozilla中的錯誤訊息

其他瀏覽器（如Firefox、Netscape和Mozilla）會將錯誤訊息傳送到一個名為JavaScript控制檯或錯誤控制檯的特殊視窗。要檢視控制檯，請選擇工具→錯誤控制檯或Web開發。

不幸的是，由於這些瀏覽器在發生錯誤時沒有任何視覺指示，因此您必須保持控制檯開啟並監視指令碼執行期間的錯誤。

錯誤通知

在控制檯或透過Internet Explorer對話方塊顯示的錯誤通知是語法錯誤和執行時錯誤的結果。這些錯誤通知包括髮生錯誤的行號。

如果您使用的是Firefox，則可以單擊錯誤控制檯中顯示的錯誤，跳轉到指令碼中出錯的確切行。

除錯指令碼

除錯JavaScript的方法有很多。以下是一些方法。

使用JavaScript驗證器

檢查JavaScript程式碼中是否存在奇怪錯誤的一種方法是將其透過一個程式執行，該程式檢查程式碼是否有效以及是否遵循該語言的官方語法規則。這些程式稱為驗證解析器或簡稱為驗證器，通常包含在商業HTML和JavaScript編輯器中。

JavaScript最方便的驗證器是Douglas Crockford的JavaScript Lint，可在Douglas Crockford的JavaScript Lint免費獲得。

只需訪問網頁，將您的JavaScript（僅JavaScript）程式碼貼上到提供的文字區域中，然後單擊jslint按鈕。此程式將解析您的JavaScript程式碼，確保所有變數和函式定義都遵循正確的語法。它還將檢查JavaScript語句（如if和while），以確保它們也遵循正確的格式。

向程式新增除錯程式碼

您可以在程式中使用alert()或document.write()方法來除錯程式碼。例如，您可以編寫如下內容：

var debugging = true; var whichImage = "widget"; 
if( debugging )  
   alert( "Calls swapImage() with argument: " + whichImage ); 
   var swapStatus = swapImage( whichImage ); 
if( debugging )  
alert( "Exits swapImage() with swapStatus=" + swapStatus ); 

透過檢查alert()的內容和順序，您可以很容易地檢查程式的執行狀況。

使用JavaScript偵錯程式

偵錯程式是一個應用程式，它將指令碼執行的各個方面置於程式設計師的控制之下。偵錯程式透過一個介面提供對指令碼狀態的細粒度控制，允許您檢查和設定值以及控制執行流程。

將指令碼載入到偵錯程式後，可以逐行執行指令碼或指示其在某些斷點處停止。執行停止後，程式設計師可以檢查指令碼及其變數的狀態，以確定是否存在問題。您還可以監視變數值的更改。

適用於Mozilla和Netscape瀏覽器的最新版本Mozilla JavaScript偵錯程式（代號為Venkman）可以從以下地址下載：www.hacksrus.com/~ginda/venkman。

對開發人員有用的提示

您可以記住以下提示，以減少指令碼中的錯誤數量並簡化除錯過程：

• 使用大量的註釋。註釋使您可以解釋為什麼您以這種方式編寫指令碼，並解釋程式碼中特別困難的部分。

• 始終使用縮排使程式碼易於閱讀。縮排語句還可以讓您更輕鬆地匹配開始和結束標記、花括號和其他HTML和指令碼元素。

• 編寫模組化程式碼。儘可能將語句分組到函式中。函式允許您對相關語句進行分組，並輕鬆測試和重用程式碼部分。

• 命名變數和函式的方式要一致。嘗試使用足夠長的名稱，這些名稱要有意義並描述變數的內容或函式的目的。

• 命名變數和函式時使用一致的語法。換句話說，全部小寫或全部大寫；如果您更喜歡駝峰式命名法，請始終如一地使用它。

• 以模組化的方式測試長指令碼。換句話說，不要嘗試在測試任何部分之前編寫整個指令碼。編寫一部分程式碼並使其工作，然後再新增下一部分程式碼。

• 使用描述性的變數和函式名稱，並避免使用單字元名稱。

• 注意您的引號。請記住，引號成對用於字串周圍，並且兩個引號必須是相同型別（單引號或雙引號）。

• 注意您的等號。不應將單個=用於比較目的。

• 使用var關鍵字顯式宣告變數。

使用Node.js進行除錯

Node.js包含一個功能齊全的除錯實用程式。要使用它，請使用debug引數啟動Node.js，後跟要除錯的指令碼的路徑。

node debug test.js

將啟動一個提示符，指示偵錯程式已成功啟動。

要在指定位置應用斷點，請在原始碼中呼叫偵錯程式，如下面的程式碼所示。

// myscript.js 
x = 5; 
setTimeout(() => { 
   debugger; 
   console.log('world'); 
}, 1000); 
console.log('hello'); 

以下是一組可以使用Node的單步執行命令。

Node除錯命令的完整列表可以在這裡找到：https://nodejs.org/api/debugger.html。

Visual Studio Code和除錯

Visual Studio Code的主要功能之一是其出色的內建Node.js執行時除錯支援。對於其他語言的除錯程式碼，它提供偵錯程式擴充套件。

偵錯程式提供了大量功能，允許我們啟動配置檔案，應用/刪除/停用和啟用斷點、變數或啟用資料檢查等。

有關使用VS Code進行除錯的詳細指南，請訪問：https://vscode.com.tw/docs/editor/debugging