必须创建多根工作区并配置compound调试，才能实现Windows 10下Codex前后端跨文件夹联合调试；需添加前后端文件夹、保存为.code-workspace、用${workspaceFolder:xxx}动态路径配置launch.json，并确保路径名一致、配置文件完备、API调用使用相对路径。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Windows 10上用Codex实现前后端跨文件夹联合调试，必须绕过单根目录限制，让前端项目和后端项目在同一个VSCode实例中被识别为逻辑整体，否则断点无法跨项目触发、变量无法关联、调试会话各自孤立。
创建多根工作区并绑定前后端目录
打开VSCode → 按Ctr+Shift+P调出命令面板 → 输入“Add Folder to Workspace…” → 选择你的前端项目文件夹（如web-app）→ 再次执行该命令 → 选择后端项目文件夹（如api-service）。
此时资源管理器顶部显示“无标题（工作区）”，说明已进入多根模式。注意：【不能直接拖拽两个文件夹到空VSCode窗口，那样只会打开第二个覆盖第一个】。
点击菜单栏“文件”→“将工作区另存为…”→ 命名为fullstack.code-workspace并保存到一个固定位置（比如D:\projects\），以后双击这个文件就能复现完整环境。
配置跨项目调试启动项
在工作区根目录下新建文件夹.vscode（若不存在），再在里面新建launch.json。
填入以下内容（以Node.js后端+React前端为例）：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Backend",
"type": "node",
"request": "launch",
"program": "${workspaceFolder:api-service}/src/index.js",
"cwd": "${workspaceFolder:api-service}",
"console": "integratedTerminal"
},
{
"name": "Debug Frontend",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder:web-app}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder:web-app}/src/*"
}
}
],
"compounds": [
{
"name": "Full Stack Debug",
"configurations": ["Debug Backend", "Debug Frontend"]
}
]
}
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
【务必使用${workspaceFolder:xxx}语法指定路径，不能写死相对路径，否则切换机器或重命名文件夹后调试直接失效】。
其中api-service和web-app必须与你在添加文件夹时设置的name字段完全一致——如果没手动命名，VSCode默认用文件夹名作为name，但一旦你改过名字，这里就必须同步更新。
启用跨根符号跳转与断点穿透
第一步：确认两个项目都已正确安装语言支持扩展。前端需有ESLint + Prettier + TypeScript插件；后端需有Node Debug Auto-attach + REST Client（可选）。
第二步：检查每个子项目根目录下是否存在有效配置文件——前端要有tsconfig.json或jsconfig.json，后端要有package.json且含"type": "module"或"main"字段。
第三步：在前端代码里调用API时，把URL写成/api/users这类相对路径，而非http://localhost:8080/api/users。这样VSCode才能在跳转定义时识别出该请求由后端路由处理，而不是当成外部HTTP调用忽略。
第四步：在后端路由处理函数第一行打个断点 → 启动“Full Stack Debug”复合配置 → 在前端页面触发对应请求 → 断点会在后端命中，且调试控制台能同时看到前后端变量作用域。
