JavaScript/除錯

閉包

最佳化

閉包

最佳化

JavaScript 偵錯程式

Firebug

• Firebug 是 Firefox 的一個強大擴充套件，它具有許多開發和除錯工具，包括 JavaScript 偵錯程式和分析器。

Venkman JavaScript 偵錯程式

• Venkman JavaScript 偵錯程式 （適用於基於 Mozilla 的瀏覽器，如 Netscape 7.x、Firefox/Phoenix/Firebird 和 Mozilla Suite 1.x）
• Venkman 簡介
• 在 Venkman 中使用斷點

Internet Explorer 除錯

• Microsoft Script Debugger （適用於 Internet Explorer）指令碼偵錯程式來自 Windows 98 和 NT 時代。它已被開發人員工具欄取代。
• Internet Explorer 開發人員工具欄
• 微軟 Visual Web Developer Express 是微軟的 Visual Studio IDE 的免費版本。它附帶一個 JS 偵錯程式。有關其功能的快速總結，請參閱 [1]
• Internet Explorer 8 預設情況下有一個類似 Firebug 的 Web 開發工具（無需附加元件），可以透過按 F12 訪問。Web 開發工具還提供在 IE8 和 IE7 渲染引擎之間切換的功能。

Safari 除錯

Safari 包含一套強大的工具，可以輕鬆除錯、調整和最佳化網站，以實現最佳效能和相容性。要訪問它們，請在 Safari 首選項中啟用“開發”選單。這些包括 Web 檢查器、錯誤控制檯、停用功能和其他開發者功能。Web 檢查器讓您快速輕鬆地訪問瀏覽器中包含的最豐富的開發工具集。從檢視頁面的結構到除錯 JavaScript 到最佳化效能，Web 檢查器以簡潔的視窗呈現其工具，旨在使開發 Web 應用程式更高效。要啟用它，請從“開發”選單中選擇“顯示 Web 檢查器”。“指令碼”窗格中包含 Safari 中功能強大的 JavaScript 偵錯程式。要使用它，請在 Web 檢查器中選擇“指令碼”窗格，然後單擊“啟用除錯”。偵錯程式會迴圈瀏覽頁面的 JavaScript，並在遇到異常或錯誤語法時停止。 “指令碼”窗格還允許您暫停 JavaScript、設定斷點和評估區域性變數。

JTF: JavaScript 單元測試農場

• JTF 是一個協作網站，它允許您建立測試用例，這些用例將在所有瀏覽器中進行測試。它是進行 TDD 和確保您的程式碼在所有瀏覽器中都能正常工作的最佳方式。

jsUnit

• jsUnit

內建除錯工具

有些人更喜歡將除錯訊息傳送到“除錯控制檯”，而不是使用 alert() 函式 [2][3][4]。以下是流行瀏覽器的簡要列表，以及如何訪問它們各自的控制檯/除錯工具。

• FirefoxCtrl+Shift+K開啟錯誤控制檯。
• Opera (9.5+)工具 >> 高階 >> 開發者工具開啟 Dragonfly。
• ChromeCtrl+Shift+J開啟 chrome 的“開發者工具”視窗，並聚焦在“控制檯”選項卡上。
• Internet ExplorerF12開啟一個類似 Firebug 的 Web 開發工具，它具有各種功能，包括在 IE8 和 IE7 渲染引擎之間切換的功能。
• SafariCmd+Alt+C開啟 Safari 的 WebKit 檢查器。

常見錯誤

• 仔細閱讀您的程式碼，查詢拼寫錯誤。
• 確保每個 "(" 都被 ")" 閉合，每個 "{" 都被 "}" 閉合。
• 陣列和物件宣告中的尾隨逗號將在 Microsoft Internet Explorer 中丟擲錯誤，但在基於 Gecko 的瀏覽器（如 Firefox）中不會。

  // Object
  var obj = {
    'foo'   : 'bar',
    'color' : 'red', //trailing comma
  };

  // Array
  var arr = [
    'foo',
    'bar', //trailing comma
  ];

• 請記住 JavaScript 區分大小寫。查詢與大小寫相關的錯誤。
• 不要使用 保留字 作為變數名、函式名或迴圈標籤。
• 用 "\" 引用元字串中的引號，否則 JavaScript 直譯器會認為正在開始一個新字串，例如

alert('He's eating food'); 應該改為

alert('He\'s eating food');或者

alert("He's eating food");

• 使用 parseInt 函式將字串轉換為數字時，請記住“08”和“09”（例如在日期時間中）表示八進位制數，因為它們有前導零。使用基數為 10 的 parseInt 可以防止錯誤轉換。var n = parseInt('09',10);
• 請記住，JavaScript 是 平臺 無關的，但不是 瀏覽器 無關的。由於沒有得到適當執行的標準，某些功能、屬性甚至物件可能在某個瀏覽器中可用，而在另一個瀏覽器中則不可用，例如，Mozilla/Gecko 陣列具有 indexOf() 函式； Microsoft Internet Explorer 沒有。

除錯方法

JavaScript 中的除錯與大多數其他程式語言中的除錯沒有太大區別。請參閱 計算機程式設計原理/維護/除錯 中的文章。

在指令碼執行時跟蹤變數

在執行時檢查變數的最基本方法是簡單的 alert() 呼叫。但是，一些開發環境允許您逐步執行程式碼，並在執行過程中檢查變數。這些型別的環境可能允許您在程式暫停時更改變數。

瀏覽器錯誤

有時瀏覽器有錯誤，而不是您的指令碼。這意味著您必須找到解決方法。

瀏覽器錯誤報告

瀏覽器相關程式碼

JavaScript 的一些高階功能在某些瀏覽器中無法使用。

我們經常會做出這樣的反應： 檢測使用者使用的瀏覽器，然後如果使用者的瀏覽器是支援它的瀏覽器之一，就以一種酷炫的方式執行操作。否則跳過它。

與使用“瀏覽器檢測”相比，更好的方法是編寫“物件檢測”JavaScript 來檢測使用者瀏覽器是否支援我們要使用的特定物件（方法、陣列或屬性）。[5] [6]

要找出方法、屬性或其他物件是否存在，並在存在時執行程式碼，我們可以編寫如下程式碼

var el = null;
if (document.getElementById) {
  // modern technique
  el = document.getElementById(id);
} else if (document.all) {
  // older Internet Explorer technique
  el = document.all[id];
} else if (document.layers) {
  // older Netscape Web browser technique
  el = document.layers[id];
}

進一步閱讀

• "JavaScript 除錯"，作者：Ben Bucksch