[Node] 如何使用 VSCode 调试 child_process

Posted 2023-03-29

参考技术A

使用 VSCode 调试 Node.js 的时候，
遇到 child_process 中的断点，是跟不进去的。

（1）目录结构
打开 VSCode，并以 main 作为根目录，

（2）app.js

（3）child/process.js

（4）.vscode/launch.json

main 项目中按 F5 ，程序会停在 app.js 中的断点处，单步调试，

然后，调试进程就结束了。并不会跑到第 6 行的断点处，

child/process.js 中的断点，也跑不进去，

以上示例中，我们发现 VSCode 无法调试到 child_process 中。
也不确定 VSCode 未来是否会支持。

当前我们可以通过 Debug 的 Attach 方式，对 child_process 进行调试。

我们需要另一个 VSCode 实例来 Attach，两个 VSCode 一起使用。

main 项目的 .vscode/launch.json 启动 main/app.js
attach 项目的 .vscode/launch.json attach 到 child_process

目录结构分别如下，

为了能 attach 成功，我们需要同步修改 main/app.js 与 attach/.vscode/launch.json，
调试端口号可以任选，不一定的 9001 ，但应保持一致。

（1）main/app.js

（2）attach/.vscode/launch.json

（1）启动 main 项目

（2）debug attach 项目
attach 项目中按 F5 ，VSCode 会 attach 到已经启动的子进程上，

（1）main 项目，按 F5 启动调试

main 项目单步调试，

这时子进程已经启动了，切换到 attach 项目启动调试。

（2）attach 项目，按 F5 启动调试

attach 项目单步调试，

（3）main 项目 child.send

main 项目单步调试，断点直接跑到了 attach 项目中，

attach 项目单步调试，断点又回到 main 项目，

Debugging in Visual Studio Code

使用 Typescript+VSCode 调试 Node.js Async/Await

【中文标题】使用 Typescript+VSCode 调试 Node.js Async/Await

【英文标题】：Debug Node.js Async/Await with Typescript+VSCode

【发布时间】：2017-05-29 10:17:06

【问题描述】：

我已经检查了以下答案：

async await with nodejs 7

How to debug async/await in visual studio code?

但是两者都没有解决我的问题。

我希望能够使用 Node.js v7.4.0 从 VSCode 调试本机 Async/Await，而无需使用可怕的 Typescript 转译版本。我能够让 Typescript 输出正确的代码，即没有 __awaiter 等。但是，一旦我尝试调试代码，所有转译的状态机代码都会出现！？所以我可以调试代码，它只是不是我要调试的代码。有没有办法阻止被调试的代码有转译的状态机代码？

这是我的配置文件：

tsconfig.json

    "compilerOptions": 
        "target": "es2017",

        "module": "commonjs",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "lib",
        "noUnusedParameters": false,
        "noUnusedLocals": false,
        "skipLibCheck": true
        //"importHelpers": true
    ,
        "exclude": [
        "node_modules"
    ]

launch.json

    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "$workspaceRoot/node_modules/jest-cli/bin/jest.js",
    "stopOnEntry": false,
    "cwd": "$workspaceRoot",
    //"preLaunchTask": "tsc",
    "runtimeExecutable": null,
    "args": [
        "--runInBand"
    ],
    "runtimeArgs": [
        "--harmony-async-await",
        "--no-deprecation"
    ],
    "env": 
        "NODE_ENV": "development"
    ,
    "console": "integratedTerminal",
    "sourceMaps": true,
    "outFiles": [
        "$workspaceRoot/lib/**/*.js"
    ],
    "skipFiles": [
        "node_modules/**/*.js",
        "lib/**/*.js"
    ]

为了进一步说明我的意思，这里是输出 javascript 中的一段 sn-p 代码：

let handler = subscription.messageSubscription.handler;
debugger;
await handler(message.message, context);

但是调试时它看起来像这样：

case 4:
    handler = subscription.messageSubscription.handler;
    debugger;
    return [4 /*yield*/, handler(message.message, context)];
case 5:

【参考方案1】：

我将 "smartStep": true 添加到 launch.json 并根据需要调试等待/异步模式（使用 Node v8.4.0）。

这是我的 launch.json：

  "version": "0.2.0",
  "configurations": [
    
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "$workspaceRoot/src/main.ts",
      "cwd": "$workspaceRoot",
      "console": "integratedTerminal",
      "outFiles": [ "$workspaceRoot/dist/*.js" ],
      "sourceMaps": true,
      "preLaunchTask": "build",
      "smartStep": true
    
  ]

更多详情请见https://code.visualstudio.com/updates/vApril#_smart-code-stepping。

这不是一个完美的解决方案，因为使用 smartStep 您无法调试到库代码中，因此如果要调试到库中，您必须手动注释掉这个选项。也许有人知道如何解决这个小不便。

【参考方案2】：

终于想通了。使用 Typescript 和 Jest。分享我所拥有的，希望它会对某人有所帮助。节点 11，VScode 1.34.0

launch.json:


    "version": "0.2.0",
    "configurations": [
        
            "type": "node",
            "request": "launch",
            "name": "Jest Current File",
            "program": "$workspaceFolder/node_modules/.bin/jest",
            "args": ["-i", "$relativeFile"],                
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "sourceMaps": true,
            "smartStep": true,
            "windows": 
                "program": "$workspaceFolder/node_modules/jest/bin/jest"
            
        
    ]



tsconfig.json:


    "compileOnSave": false,
    "compilerOptions": 
        "baseUrl": ".",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "inlineSources": true,
        "sourceRoot": "/",
        "declaration": false,
        "module": "es2015",
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "stripInternal": true,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es2017",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom", "esnext.asynciterable"],
        "types": ["chrome", "node", "jest"]         
    

但这仅在某些情况下有效。如果您可以将您的应用程序编译为 JS ES2017 就可以了。 angular 不能编译成那个 es 版本，所以。它仅适用于一些测试文件。 angular compile 不输出 es2017 非常令人沮丧。并且在未来很多年都不会。