如何在 VSCode 中配置运行并调试 RedwoodJS 项目-VSCode-PHP中文网

redwoodjs调试失败主因是launch.json配置错误、端口冲突或sourcemap路径未指向编译后文件；需检查redwood.toml端口设置、确保yarn redwood build api生成sourcemap，并在launch.json中正确配置outfiles。

如何在 vscode 中配置运行并调试 redwoodjs 项目

RedwoodJS 项目在 VSCode 中调试失败，90% 是因为 launch.json 没配对、端口冲突或 sourcemap 路径没指向打包后文件 —— 不是代码写错了，是调试链路断了。

Redwood 默认用 yarn redwood dev 同时拉起 Web（3000）和 API（8910）服务，VSCode 终端常因环境变量缺失或端口被占而静默卡住。

运行 lsof -i :8910（macOS/Linux）或 netstat -ano | findstr :8910（Windows）确认端口是否被占；若被占，直接换端口：yarn redwood dev --forward-api-port=8911
检查 redwood.toml 是否硬编码了 api.port = 8910 或 web.port = 3000；改完必须重启 VSCode 终端，CLI 会缓存配置
如果用 WSL2，redwood.toml 必须加 host = "0.0.0.0"，否则 VSCode Remote-WSL 插件连不上 localhost

VSCode 默认无法把 api/src/services/posts.ts 和实际运行的 .redwood/functions/graphql.js 映射起来 —— 断点得打在编译后的入口函数上，不是源码里。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

在 .vscode/launch.json 的 Node.js 调试配置中，必须包含："outFiles": ["./.redwood/functions/**/*"]，否则 sourcemap 不加载
启动调试前，先执行 yarn redwood build api 确保生成最新 sourcemap（开发时 yarn redwood dev 也会做，但缓存可能失效）
断点优先设在 api/src/functions/graphql.ts 的 handler 函数开头；进 resolver 后再打，要确保对应 services 文件里有 debugger 语句且 TS 编译未抹掉它

VSCode 的 Jest Test Explorer 插件默认按工作区根目录找模块，但 Redwood 的测试工具链依赖 Babel/TS 预处理器注入全局函数，路径错一点就全挂。

在 VSCode 设置里搜 jest.pathToJest，值设为 "yarn jest"（不是 yarn run jest），避免 Shell 解析差异
检查 jest.config.js 是否导出含 roots: ['<rootdir>/web', '<rootdir>/api']</rootdir></rootdir>；缺了 /api，api/src/services/__tests__ 下的测试根本不会被扫描
TS 用户注意：ts-jest 版本必须匹配 Redwood 锁定的 TypeScript 版本（v5.x Redwood 对应 TS 4.9），装 ts-jest@29.1 会直接报错

Redwood 的 @redwoodjs/api/logger 和类型定义（如 web/types/graphql.d.ts）不是开箱即用的 —— 它们依赖 CLI 的 watch 机制或手动触发，VSCode 不会自动帮你跑。

日志器需在 api/src/lib/logger.ts 显式调用 createLogger({})；开发时默认级别是 trace，但若没看到日志，先确认 yarn redwood dev 是否已完整启动（API 服务没起来，logger 就没初始化）
类型文件由 yarn redwood generate types（或简写 yarn rw g types）生成；GraphQL 查询变更后，必须手动重跑，VSCode 不会监听 SDL 文件自动更新 .d.ts
前端组件里用 CellSuccessProps<myquery myqueryvariables></myquery> 时，确保 web/types/graphql.d.ts 已存在且无语法错误，否则 TS 报错会掩盖真实问题