由淺入深學習JavaScript Debug技巧

作者 | Julie Pagano

翻譯 | Fundebug

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

我常常看到不少開發者不懂如何Debug 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來說，開發者工具真的非常有用。接下來我來介紹如何使用它。

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

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

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

打開後，如下所示：

控制臺（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來舉例。

往下滑動觸發網絡請求。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/