如何在浏览器中调试 Vitest 测试？

【问题标题】：How to debug Vitest test in the browser?如何在浏览器中调试 Vitest 测试？
【发布时间】：2022-08-15 17:55:22
【问题描述】：

我已经在 webstorm 中失败了：https://youtrack.jetbrains.com/issue/WEB-56836/Vitest-debugging

那么我还应该在浏览器中添加什么来调试测试呢？我试过node --inspect ./node_modules/vitest/vitest.mjs

如果我尝试上述方法并让brave://inspect/#devices 打开测试运行但没有断点（通过调试器语句）被命中。

标签： node.js google-chrome debugging vite vitest

【解决方案1】：

尝试：

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

然后在调试选项卡中，确保选择了“调试当前测试文件”。然后您可以打开要调试的测试文件并按 F5 开始调试。