Qwik应用VSCode调试配置：如何编写launch.json调试SSR部分

针对你用npm create qwik@latest生成的基础Qwik项目，要在VSCode中调试SSR部分的代码，只需在项目根目录的.vscode/launch.json文件中添加以下配置即可：

配置方案一：复用package.json中的dev.debug脚本 #

这种方式直接调用你已有的调试脚本，操作最简单：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Qwik SSR Debug",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev.debug"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

配置方案二：手动指定Node调试参数 #

如果你想脱离npm脚本直接配置，可使用这个版本：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Qwik SSR Debug",
      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
      "args": ["--mode", "ssr", "--force"],
      "runtimeArgs": ["--inspect-brk"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

使用步骤 #

1. 若项目中没有.vscode/launch.json，点击VSCode左侧调试面板的「创建launch.json文件」，选择Node.js环境后替换成上述配置
2. 在SSR相关代码（比如src/routes下的页面组件、src/entry.ssr.tsx等）中设置断点
3. 点击调试面板启动按钮（或按F5），等待调试器连接成功
4. 在浏览器访问默认地址http://localhost:5173，触发SSR渲染时断点会自动命中

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