由淺入深學習JavaScript Debug技巧

點選上方“中興開發者社群”，關注我們

每天讀一篇一線開發者原創好文

作者 | Julie Pagano

翻譯 | Fundebug

譯者按：從alert到debugger;看看你屬於哪個段位。為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

我常常看到不少開發者不懂如何Debug JavaScript程式碼，因此決定寫一篇部落格為初學者介紹如何Debug。我希望這篇文章可以提供一些有用的資訊。我嘗試在本文講述很多內容，所以有些部分並沒有講得很細。

在開始之前，做一些基本的準備：

• 這是針對瀏覽器執行的JavaScript，而不是Node.js；

• 你需要有一定的編寫JavaScript的基礎；

• 你需要在概念上知道Debug是什麼；

• 你最好動起手來，邊看邊操作。

注意：1. 你最好開啟兩個視窗，一邊看一邊操作來學習；2. 本文的主要目的是教會你debug，文中的JavaScript程式碼並不規範，不要學壞啦。

警告(alert)

使用警告(alert)會彈出一個對話方塊顯示特定的警告資訊，並且有一個OK按鈕。如果你點選OK，該對話方塊消失。

alert("Hello! I am an alert.");

這一招蠻有用的，你可以將想要檢視的值通過alert顯示出來。

// 通過alert來確認程式碼執行的位置

alert("I am here!");

// 顯示foo的值

alert("Foo: " + foo);

但如果你不小心將alert放在了for迴圈中，那就慘了。我曾經就遇到過，不得不強行將瀏覽器關閉。

// 除非你喜歡alert, 不要這樣做！

for (i = 0; i < 100; i++) {

  alert(i);

}

好在，如今的谷歌瀏覽器已經幫你考慮到這一點。如果你不小心弄出了很多alert，谷歌瀏覽器會識別出來並建議你將它們都阻止。

曾經，alert是大家非常常用的debug工具。不過，使用alert侷限性太大，它只能顯示字串。

// 顯示所有的h2標籤內容

alert($('h2'));

然而，並不會顯示出來：

既然這麼不好用，為啥你還要講呢？因為我們可能有時候不得不使用這樣舊式的技巧。我最近一次使用alert是我在debug一個移動裝置的時候現有的技巧無法正常工作，我只好用alert。

開發者工具

歡迎來到未來！哈哈，並不是這樣。開發者工具已經使用了好些年了。不過呢，很多新的特性被加進去，相信不少人都不知道或則不清楚怎麼使用。對於JavaScript debug來說，開發者工具真的非常有用。接下來我來介紹如何使用它。

首先，你需要知道如何開啟它。你可以使用快捷鍵：

• Window/Linux: ctrl + shift + I;

• OSX: cmd + opt + I

你也可以從谷歌瀏覽器的選單欄選擇開發者工具選項來開啟：

你還可以直接右鍵，選擇檢查來開啟：

開啟後，如下所示：

控制檯（Console）

在使用JavaScript做開發的時候，控制檯非常有用。當使用C, C++, Java開發的時候，我們可以使用終端(terminal)來debug，控制檯擁有和終端相似的功能。

錯誤

控制檯顯示JavaScript錯誤。

同時，也顯示了錯誤在原始碼中的位置。點選(index):150就可以跳轉到原始碼去。

<input type="button" onclick="alert(THE SPICE MUST FLOW);" value="Click to create an error">

這行程式碼有錯誤，你知道哪裡出問題了嗎？

命令列

控制檯擁有的互動式命令列可以用來debug。下面是一些例子：

你可以做一些基礎的JavaScript程式設計

// 數學加法

2 + 2

// 字串拼接

"the golden " + "path"

// 呼叫alert

alert("Muad'Dib!");

你也可以執行復雜的JavaScript程式碼

// 建立變數

var arr = [1, 2, 3];

// 使用shitf+enter鍵來換行

for (var i = 0; i < arr.length; i++) {

  arr[i] = arr[i] * 2;

}

arr;

控制檯本身也提供了很多有用的函式，詳情參考api文件（https://developer.chrome.com/devtools/docs/commandline-api）。

// 通過css選擇器獲取元素

$$('h2');

// 甚至XPath

$x('//h2');

你可以訪問本頁面載入的所有庫。比如，jQuery：

// 頁面背景色變紅

$('body').css('background-color', 'red');

// 改回去

$('body').css('background-color', '');

你可以獲取當前環境下的變數。

// 當前的this

this;

console.log

console.log在控制檯列印資訊。

console.log("I am logging to the console.");

我們可以使用它做到之前alert可以實現的功能：

// 確認程式碼當前執行位置

console.log("I am here!");

// 列印變數值

console.log("Foo: " + foo);

而且，我們可以用for迴圈將所有的值列印出來：

for (i = 0; i < 100; i++) {

  console.log(i);

}

alert只能顯示字串，console.log就強大多了：

// 可以輸出DOM元素

console.log($('h2'));

// 可以顯示物件

console.log({

  book: "Dune",

  characters: ["Paul", "Leto", "Jessica", "Chani", "sandworms"]

});

這僅僅是個開始。使用console.log你可以做很多事情，請參考api文件（https://developer.chrome.com/devtools/docs/console-api）。

控制檯列印日誌已經基本上可以應付日常debug需求了，所以很多開發者止步於此。其實，我們還有更加高階、更加方便的方法。

互動式Debugger

谷歌開發者工具提供了一個互動式debugger。我發現對於複雜的JavaScript程式碼，特別是自己編寫的程式碼和其它庫有互動的時候，特別有用。

你可以再程式碼中通過呼叫debugger來開啟debug。

// 從這裡開始debug

debugger;

只有在開啟開發者工具的時候，debugger才會起作用。如果你將開發者工具皮膚關閉，將不會收到任何影響。

如果你點選繼續按鈕(右側藍色的類似於播放的按鈕)，程式碼會繼續執行直到下一個斷點。

如果你點選跳過按鈕(繼續按鈕的右側，第二個)，它會直接執行當前函式，而不是進入函式內部。

如果你想知道makeItColor函式具體如何執行，點選進入按鈕(第三個)，就會跳入函式內部。如果你想跳出來，那麼點選第跳出按鈕(第四個)。

如果想檢視變數的值，可以選中並把滑鼠放在上面：

你可以敲擊ESC鍵來快速開啟控制檯，再次敲擊ESC，控制檯消失。

你可以手動在程式碼的某一行新增斷點來暫停執行。在第31行的左側滑鼠單擊，會出現一個斷點符號。

庫和壓縮程式碼

有時候，為了debug，你可能需要檢視庫函式的原始碼。但是，一般線上的程式碼都是經過壓縮的，很難看懂。比如jQuery：

如果你點選下方的{}按鈕，可以將程式碼適當格式化，但是依然很難看懂。

壓縮程式碼在生產環境十分有必要，但是卻十分為難debug。好在，大多數庫都提供非壓縮版本的程式碼。所以，你可以在開發中引用非壓縮版，線上引用壓縮版。

<!-- 線上 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<!-- 開發 -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>

線上上環境中，如果使用者遇到bug如何才能知道呢？推薦你使用fundebug監控服務（https://fundebug.com/）。

Ajax請求

開發者工具的網路部分對於解決網路請求相關問題非常有用。

我用Twitter來舉例。

• 到@horse_js(或則其它頁面)

• 開啟開發者工具

• 點選Network標籤

• 點選filter圖示

• 選中XHR(XMLHttpRequest), 將所有網路請求篩選出來

往下滑動觸發網路請求。Headers標籤顯示該請求的一些基本資訊：

Preview顯示的是經過瀏覽器格式化的返回結果(Response)。

Response是原始的返回資料。

Cookies顯示請求相關的cookies資訊。

Timing顯示請求的時間資訊。

效能

Debug JavaScript的效能需要很多篇幅去介紹。在這裡，給出一些參考資料：

• jsPerf（http://jsperf.com/）

• Evaluating network performance（https://developer.chrome.com/devtools/docs/network）

• Performance profiling with the Timeline（https://developer.chrome.com/devtools/docs/timeline）

• Profiling JavaScript Performance（https://developer.chrome.com/devtools/docs/cpu-profiling）

• JavaScript Memory Profiling（https://developer.chrome.com/devtools/docs/javascript-memory-profiling）

移動端

你可以使用開發者工具來模擬移動互動，這樣就可以直接在桌面瀏覽器debug。如果想了解更多，檢視文件（https://developer.chrome.com/devtools/docs/mobile-emulation）。

當然，你很可能需要真機除錯，可以參考下面的文章：

• Remote Debugging Chrome on Android（https://developer.chrome.com/devtools/docs/remote-debugging）

• Quick Tip: Using Web Inspector to Debug Mobile Safari（http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787）

來源：https://blog.fundebug.com/2017/12/04/javascript-debugging-for-beginners/