如何在VSCode中调试Express.js/React/Redux/GQL/Apollo栈服务端代码？

1. 修正VS Code调试配置（添加服务端调试项） #

当前你的launch.json仅配置了前端浏览器调试，服务端Node.js代码需要单独的调试配置。更新配置文件如下：

{
    "version": "0.2.0",
    "configurations": [
        // 保留原有的前端浏览器调试
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "skipFiles": ["<node_internals>/**"],
            "url": "http://localhost:3001",
            "webRoot": "${workspaceFolder}"
        },
        // 添加服务端Node.js调试配置
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Server in Debug Mode",
            "program": "${workspaceFolder}/src/server.js", // 替换为你的服务端入口文件路径
            "args": [],
            "skipFiles": ["<node_internals>/**"],
            "env": {
                "NODE_ENV": "development"
            }
        }
    ]
}

如果你的服务端通过yarn start启动，需修改package.json的启动脚本，开启Node调试模式：

{
  "scripts": {
    "start": "node --inspect src/server.js", // 替换为你的服务端入口
    "dev": "nodemon --inspect src/server.js" // 用nodemon实现热重载调试
  }
}

2. 正确启动调试流程 #

• 先在VS Code调试面板选择Launch Server in Debug Mode启动服务端，此时服务端代码的断点会自动绑定。
• 再启动Launch Edge against localhost调试前端，客户端发起请求时，服务端断点即可正常触发。

3. 服务端GQL查询调试技巧 #

• 在src/data/queries/[filename].js的关键逻辑处（如查询函数入口、数据库调用前）添加断点，确保断点标记为实心红点（代表已成功绑定到运行进程）。
• 在Apollo Server初始化时开启调试模式，输出详细日志：

const server = new ApolloServer({
  typeDefs,
  resolvers,
  debug: true, // 开启调试日志
  context: ({ req }) => {
    // 上下文逻辑
  }
});

• 在查询函数中添加console.log，打印请求参数、数据库结果或错误，快速定位问题：

// src/data/queries/[filename].js
export const yourQueryResolver = async (parent, args, context) => {
  console.log("Received query args:", args); // 打印请求参数
  try {
    const result = await context.db.yourModel.find(args);
    console.log("Query result:", result);
    return result;
  } catch (err) {
    console.error("Query error:", err); // 捕获并打印错误
    throw err;
  }
};

4. 客户端无反馈问题排查 #

• 开启Apollo客户端调试工具：在ApolloClient初始化时添加connectToDevTools: true，打开浏览器开发者工具的Apollo标签，查看请求状态、错误详情：

const client = new ApolloClient({
  uri: "http://localhost:3001/graphql", // 确认地址与服务端一致
  cache: new InMemoryCache(),
  connectToDevTools: true
});

• 在客户端GQL调用处添加错误处理，捕获并打印错误：

// 以useQuery为例
const { loading, error, data } = useQuery(YOUR_QUERY, {
  variables: { /* 参数 */ }
});

if (error) {
  console.error("Client query error:", error); // 打印客户端侧错误
}

5. 其他排查要点 #

• 确认服务端确实监听在3001端口，客户端请求的GraphQL端点地址（如/graphql）正确。
• 检查跨域配置：若前端和服务端端口不同，确保服务端已配置CORS允许前端域名访问。
• 验证数据库连接：确认服务端能正常连接数据库，测试基础数据库操作是否可用。

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