由淺入深學習JavaScript Debug技巧

  • 2019 年 12 月 31 日
  • 筆記

譯者按： 從 alert 到 debugger;看看你屬於哪個段位。

本文採用意譯，版權歸原作者所有

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

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

  • 這是針對瀏覽器運行的 JavaScript，而不是 Node.js；
  • 你需要有一定的編寫 JavaScript 的基礎；
  • 你需要在概念上知道 Debug 是什麼；
  • 你最好動起手來，邊看邊操作。

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

目錄

  • 警告(alert)
  • 開發者工具
  • 控制台(Console)
  • 列印日誌(console.log)
  • 互動式 Debugger
  • 庫函數和壓縮程式碼
  • Ajax 請求
  • 性能
  • 移動端

警告(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);  }

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

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

// 顯示所有的h2標籤內容  alert($("h2"));

然而，並不會顯示出來：

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

開發者工具

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

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

  • Window/Linux: ctrl + shift + I;
  • OSX: cmd + opt + I

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

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

打開後，如下所示：

控制台(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 文檔。

// 通過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 文檔。

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

互動式 Debugger

Google開發者工具提供了一個互動式 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 監控服務。

Ajax 請求

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

我用 Twitter 來舉例。

  • 到@horse_js(或則其它頁面)
  • 打開開發者工具
  • 點擊 Network 標籤
  • 點擊 filter 圖標
  • 選中 XHR(XMLHttpRequest), 將所有網路請求篩選出來

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

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

Response是原始的返回數據。

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

Timing顯示請求的時間資訊。

性能

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

移動端

你可以使用開發者工具來模擬移動交互，這樣就可以直接在桌面瀏覽器 debug。如果想了解更多，查看文檔。

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

版權聲明

轉載時請註明作者 Fundebug以及本文地址： https://blog.fundebug.com/2017/12/04/javascript-debugging-for-beginners/

VirMach 便宜 VPS

QNews

QNews