如何在浏览器中调试Vitest测试？WebStorm调试失败后的解决方案咨询

1. 用Vitest内置的浏览器调试UI（最简便） #

直接执行以下命令启动带浏览器界面的Vitest调试工具：

npx vitest --ui --browser

命令执行后会自动打开浏览器和Vitest的可视化界面，你可以在界面中选择要调试的测试用例，然后在浏览器开发者工具的Sources面板中添加断点或使用debugger语句，断点会正常触发。

2. 修正手动调试的命令参数 #

如果要通过node --inspect方式调试，需要补充浏览器模式参数并调整调试触发时机：

node --inspect-brk ./node_modules/vitest/vitest.mjs --browser

• --inspect-brk会让Node进程在启动时暂停，避免测试代码在调试器连接前就执行完毕
• --browser强制Vitest在浏览器环境运行测试（默认是Node环境，这也是你之前断点不触发的核心原因）

3. 确保断点生效的关键配置 #

• 在vitest.config.js（或vite.config.js）中开启sourcemap，避免断点错位：

export default {
  test: {
    sourcemap: true,
    browser: {
      enabled: true,
      name: 'brave', // 指定使用Brave浏览器
      headless: false, // 关闭无头模式，方便查看浏览器界面
    }
  }
}

• 检查测试代码中的debugger语句是否被代码压缩工具移除，确保测试环境没有开启生产模式的压缩配置

4. 浏览器调试面板的正确操作 #

打开brave://inspect/#devices后，点击对应Vitest进程的inspect按钮，在弹出的开发者工具中：

• 切换到Sources面板，通过webpack://或vite://前缀找到你的测试文件
• 手动添加断点，或确认debugger语句所在行是否被正确加载

内容的提问来源于stack exchange，提问作者Nikos