程式 Debug 技巧與 Debugging 除錯工具

debug

在開發過程中,無論你是前端還是後端開發者,debug(除錯)技能都是必備的。在這篇文章中,我們將詳細介紹如何使用JavaScript進行debug,並且介紹一些實用的debug工具。


1. 什麼是Debugging?

Debugging是找出並修復程式碼錯誤或問題的過程。錯誤可能包括語法錯誤(syntax errors)、邏輯錯誤(logic errors)和執行錯誤(runtime errors)。透過debugging,我們可以追蹤程式碼的運行情況,找出問題的所在,並修改程式碼以使其正常運行。


2. Debug的基本技巧

在進行debug時,有幾個關鍵步驟需要遵循:

2.1 準確理解問題

在你修復錯誤之前,你需要完全理解問題的所在。這可能需要閱讀錯誤訊息、檢查變數的值、或者跟蹤程式碼的執行流程。

2.2 簡化問題

嘗試以最簡單的方式再現問題。這可能意味著你需要建立一個簡單的測試環境,或者創建一個最小化的程式碼來重現問題。

2.3 分解問題

如果程式碼相對複雜,並且難以確定問題的具體位置,那麼你可以使用分解問題的策略,也就是將問題分割為更小、更可管理的部分來進行檢查和修復。

如何 Debug ?從認識 Chrome DevTools 學習前端優化 Debug 技巧


3. JavaScript Debugging 工具

JavaScript作為一門主要用於網頁開發的語言,具有眾多強大的debug工具,其中最常用的就是瀏覽器的開發者工具。

3.1 瀏覽器的開發者工具

Chrome和Firefox等瀏覽器提供了強大的開發者工具,包括JavaScript的debug工具。你可以在這些工具中設置斷點、觀察變數的值、步進程式碼等,以幫助理解程式碼的運行情況。

  1. Chrome 開發者工具:Google 的 Chrome 瀏覽器內建的開發者工具,提供了許多功能,例如元素檢視、控制台、網路和性能分析、JavaScript 的除錯等等。
  2. Firefox 開發者工具:Mozilla 的 Firefox 瀏覽器的開發者工具,同樣具備一系列的開發和調試功能。
  3. Safari 開發者工具:Apple 的 Safari 瀏覽器內建的開發者工具,對於在 Mac 上進行開發的使用者非常有用。

3.2 Node.js的debug工具

如果你在後端使用Node.js開發,那麼你也可以使用其內建的debug工具 Node.js 調試器。你可以使用--inspect參數來啟動debug模式,然後在Chrome瀏覽器的 chrome://inspect 頁面中查看和控制你的程式碼。

3.3 Visual Studio Code的Debug工具

Visual Studio Code 是一個流行的開發環境,它內建了JavaScript的debug工具。你可以設置斷點、查看變數的值、步進程式碼,甚至可以修改變數的值來測試不同的情況。

VSCode 是什麼,常用外掛擴充套件推薦


4. JavaScript Debug實作範例與步驟

下面我們將以一個簡單的JavaScript程式碼為例,來實際演示如何進行debug。

首先,我們有一個帶有邏輯錯誤的程式碼:

function calculateSum(n) {
    let result = 0;
    for (let i = 1; i < n; i++) {
        result += i;
    }
    return result;
}

console.log(calculateSum(10));  // 應該返回55,但實際上返回了45

我們可以看到,這個程式碼的目的是計算從1到n(不含n)的所有數字之和,但是其實際的運行結果並不正確。現在,我們將使用Chrome開發者工具來debug這個程式碼。

4.1 設置斷點

首先,我們需要在Chrome開發者工具中打開我們的JavaScript文件。然後,我們在想要暫停的行處設置一個斷點。在這個例子中,我們在for循環中的result += i;這一行設置了斷點。

4.2 啟動debug模式

接下來,我們在瀏覽器中執行這個程式碼。當執行到設置斷點的那一行時,程式會暫停,我們可以在開發者工具中看到當前的執行情況。

4.3 觀察變數的值

在debug模式下,我們可以在開發者工具的右側面板看到當前範疇的變數和它們的值。在這個例子中,我們可以看到iresult的值。

4.4 逐步執行程式碼

我們可以使用開發者工具的控制按鈕來逐步執行程式碼。例如,我們可以按”Step

over next function call”按鈕(或F10)來執行下一行程式碼,但不進入函數裡面。我們也可以按”Step into next function call”按鈕(或F11)來執行下一行程式碼,並且進入函數裡面。同時,我們可以在每一步都檢查變數的值,以理解程式碼的運行情況。

4.5 修改程式碼並重新執行

通過以上的步驟,我們可以發現calculateSum函數的邏輯錯誤:for循環的結束條件應該是i <= n而不是i < n。於是我們可以在開發者工具中直接修改程式碼,然後按”Reload”按鈕來重新載入並執行程式碼。這次,我們可以看到calculateSum(10)返回了正確的結果:55。

透過上述的示範,我們可以看到debug工具的強大之處:它們不僅能幫助我們理解程式碼的運行情況,還能讓我們在運行時修改程式碼以測試不同的情況。因此,掌握debug技巧和工具是成為一個優秀開發者的重要一步。