偵錯

TIP

偵錯測試時，您可能需要使用 --test-timeout CLI 參數，以防止測試在中斷點停止時逾時。

VS Code

在 VS Code 中，偵錯測試的快捷方式是使用 JavaScript Debug Terminal。開啟一個新的 JavaScript Debug Terminal 並直接執行 npm run test 或 vitest。此方法適用於任何在 Node.js 環境中執行的程式碼，因此也適用於大多數 JavaScript 測試框架。

您也可以建立專用的啟動設定，以便在 VS Code 中偵錯測試檔案：

{
  // 如需更多資訊，請造訪：https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "偵錯目前測試檔案",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

然後在偵錯頁籤中，確保已選取「偵錯目前測試檔案」。接著您可以開啟欲偵錯的測試檔案，然後按下 F5 開始偵錯。

瀏覽器模式

若要偵錯 Vitest 瀏覽器模式，請在 CLI 中傳入 --inspect 或 --inspect-brk，或在您的 Vitest 設定中定義：

CLI

vitest --inspect-brk --browser --no-file-parallelism

vitest.config.js

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    inspectBrk: true,
    fileParallelism: false,
    browser: {
      name: 'chromium',
      provider: 'playwright',
    },
  },
});

預設情況下，Vitest 將使用連接埠 9229 作為偵錯連接埠。您可以透過在 --inspect-brk 中傳入值來覆寫此設定：

vitest --inspect-brk=127.0.0.1:3000 --browser --no-file-parallelism

請使用以下 VSCode 複合設定 來啟動 Vitest 並將偵錯器附加至瀏覽器：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "執行 Vitest 瀏覽器",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal",
      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "附加至 Vitest 瀏覽器",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "偵錯 Vitest 瀏覽器",
      "configurations": ["附加至 Vitest 瀏覽器", "執行 Vitest 瀏覽器"],
      "stopAll": true
    }
  ]
}

IntelliJ IDEA

建立一個 vitest 執行組態。使用以下設定以偵錯模式執行所有測試：

設定	值
工作目錄	/path/to/your-project-root

然後以偵錯模式執行此組態。IDE 將會在編輯器中設定的 JavaScript/TypeScript 中斷點處停止。

Node Inspector，例如 Chrome DevTools

Vitest 也支援在沒有 IDE 的情況下偵錯測試。然而，這要求測試不能平行執行。請使用以下其中一個指令來啟動 Vitest。

# 在單一 worker 中執行
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread

# 在單一子行程中執行
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork

# 以瀏覽器模式執行
vitest --inspect-brk --browser --no-file-parallelism

如果您使用 Vitest 1.1 或更高版本，您也可以只指定 --no-file-parallelism 旗標：

# 如果 pool 未知
vitest --inspect-brk --no-file-parallelism

Vitest 啟動後，將會停止執行並等待您開啟可連接至 Node.js inspector 的開發人員工具。您可以在瀏覽器中開啟 chrome://inspect 來使用 Chrome DevTools 進行此操作。

在監控模式下，您可以使用 --poolOptions.threads.isolate false 選項，在測試重新執行期間保持偵錯器開啟。