2024-11-15 debug vue 可以設定 breakpoint 嗎?

發表於 分類於 閱讀次數：
2024-11-15 debug vue 可以設定 breakpoint 嗎?

2024-11-15 debug vue 可以設定 breakpoint 嗎?

是的，您可以在 Vue 應用中設定 breakpoint 來進行調試。這可以幫助您更清楚地了解程式碼的執行流程、檢查變數的值，並確保程式在執行時按預期工作。以下是如何在 Vue 中設定和使用 breakpoint 的方法：

1. 在瀏覽器的開發者工具中設置斷點

您可以使用瀏覽器的開發者工具來設置 breakpoint，這是最常見的調試方法。步驟如下：

1.1 打開開發者工具

在大多數現代瀏覽器中，您可以按 F12 或 Ctrl + Shift + I（或 Cmd + Option + I 在 Mac 上）來打開開發者工具。

1.2 設置斷點

  1. 轉到 “Sources” 標籤（這是你瀏覽器開發者工具中的源碼頁面，能夠查看和調試 JavaScript 代碼）。
  2. 找到您的 Vue 代碼文件，通常是 .js 或 .vue 文件。
  3. 點擊您想要設置斷點的行數，這會在該行上設置一個紅點，表示斷點已經設置。

1.3 使用 debugger 關鍵字

如果您希望在某個特定條件下進行調試，您可以在代碼中手動插入 debugger 語句。這會在執行到這一行時，強制進入調試模式，並在瀏覽器的開發者工具中停下來：

1
2
3
4
5
6
7
8
9
methods: {
  startTimer() {
    debugger;  // 程式執行到這行時會停下來
    if (this.timer) return;
    this.timer = setInterval(() => {
      this.time += 10;
    }, 10);
  }
}

當這段代碼執行到 debugger 這一行時，瀏覽器會停下來，讓您檢查當前的變數值和程式狀態。

2. 在 VS Code 中使用調試工具

如果您使用的是 VS Code，您可以設定一個 Node.js 調試環境來直接在本地開發中進行調試。以下是如何在 VS Code 中設置斷點的步驟：

2.1 配置 launch.json 文件

  1. 打開您的 Vue 項目，並確保安裝了 Vue 開發工具和相關插件。
  2. 點擊左側的 “Run and Debug” 按鈕，然後選擇 “Add Configuration…”。
  3. 在彈出窗口中選擇 Node.js 或 Chrome 作為調試目標，這取決於您是用 npm 還是 Vue CLI 啟動的。

2.2 設置斷點

  1. 打開您想要設置斷點的 .js 或 .vue 文件。
  2. 點擊行號左邊的空白處，這會設置一個紅點來標識斷點。
  3. 開始調試您的 Vue 應用，當程式執行到該行時，調試器會停下來。

3. 在 Vue CLI 中啟用調試模式

如果您使用的是 Vue CLI 進行開發，您還可以啟用調試模式：

  1. 在 vue.config.js 配置文件中，啟用調試工具：

    1
    2
    3
    4
    5
    module.exports = {
      configureWebpack: {
        devtool: 'source-map',  // 啟用 source map 以便進行調試
      }
    };

  2. 在瀏覽器的開發者工具中，打開 “Sources” 標籤，您就可以看到您未經壓縮的源代碼（不是編譯後的代碼），這樣就可以進行調試。

小結

  • 您可以在瀏覽器開發者工具中設置斷點，或者通過在代碼中插入 debugger 來實現調試。
  • 如果您使用 VS Code，則可以設置調試配置來進行本地調試。
  • 啟用 source-map 能讓您查看未經壓縮的代碼，並在瀏覽器開發者工具中進行調試。

是的，通過設置斷點，您可以在調試過程中查看變數的變化。當您使用開發者工具（例如 Chrome DevTools）或 VS Code 進行調試時，您可以：

  1. 查看變數的值：當程式碼執行到設置的斷點時，程序會暫停。這時，您可以查看當前作用域內所有變數的值，包括函式內部的變數、data 屬性、computed 屬性等。

  2. 逐行執行代碼：在斷點處停下來後，您可以逐行執行代碼，這樣就能夠看到每次執行時變數值的變化。例如，您可以在 setInterval 中調試 this.time 的變化過程。

  3. 查看物件的屬性：如果您需要查看某個物件的屬性值，您可以將鼠標懸停在該物件上，開發者工具會顯示它的當前值，或者在控制台中輸入變數名稱來查看它。

具體操作步驟：

1. 使用 Chrome 開發者工具調試變數

  1. 打開 Chrome 開發者工具（F12 或 Ctrl + Shift + I）。
  2. 在 “Sources” 標籤中，找到您的 Vue 應用代碼。
  3. 設置斷點：點擊您想要停下來的代碼行號，這會設置一個紅點。
  4. 當執行到該行時，程序會停下來，您可以：
    • 在開發者工具的右側面板中查看變數值。
    • 使用 “Watch” 面板來監視特定變數。
    • 使用 “Console” 面板輸入變數名稱並查看其當前值。

2. 使用 VS Code 的調試功能

  1. 在 launch.json 中配置好調試環境（如果您使用 VS Code）。
  2. 設置斷點：在您感興趣的代碼行左側點擊設置斷點。
  3. 開始調試：點擊 “Run and Debug” 按鈕來啟動調試。
  4. 當程式執行到斷點時，您可以：
    • 在左側的變數面板中查看當前作用域下的所有變數。
    • 點擊變數名來查看更詳細的物件或數組結構。
    • 使用調試控制台來查看變數的值或執行 JavaScript 表達式。

3. 查看變數的變化

  • 步進執行代碼：在斷點停下後，您可以使用 “Step Over”、”Step Into” 或 “Step Out” 等步進控制按鈕，這樣您可以逐步執行代碼並觀察變數在每個步驟中的變化。
  • 監視表達式：您可以在 “Watch” 面板中添加變數或表達式，這樣每當程式執行到下一步時，這些變數的值會自動更新顯示。

4. 在控制台中檢查變數

在開發者工具的控制台中，您還可以輸入變數名來查看其當前值。例如，假設您有一個 time 變數，您可以在控制台中輸入：

1
console.log(this.time);

或者：

1
this.time

這樣可以即時看到變數的當前值。

實際範例：

假設在 Vue 中您有一個 time 變數，每當用戶點擊啟動按鈕時，time 會每 10 毫秒增加 10。您可以設置斷點並逐步檢查 time 變數的變化過程：

1
2
3
4
5
6
startTimer() {
  if (this.timer) return;
  this.timer = setInterval(() => {
    this.time += 10; // 每 10 毫秒增加一次
  }, 10);
}

當程式執行到 this.time += 10 這行時，您可以在開發者工具中查看 this.time 的值。每次進入 setInterval 時，您都可以查看它如何逐步增加。

小結：

  • 在調試過程中，您可以查看變數的值、物件的屬性、數組的元素等。
  • 逐步執行代碼可以幫助您觀察變數在每一步中的變化。
  • 控制台可以即時檢查變數的值，並幫助您進行交互式調試。