VSCode Node.js 调试配置 (npm 脚本启动)

Posted 2023-04-23

参考技术A 相当于直接使用 node 命令，用 npm run script 脚本 来启动 Node.js 程序是更为常见的场景，比如当目标是运行一个应用。

假设项目的 package.json 有一个用来调试的 debug 脚本：

我们要怎么启动项目的跟踪调试呢？

文档指路 ➡️ 【Node.js 调试入门】 、 【VSCode 中的 Node.js 调试】 、 【Launch 对 npm 及其他工具的配置支持】

VS Code 支持两种核心调试模式 Launch 和 Attach ，Launch 方式是直接以 debug 模式启动应用，并为我们自动添加一个调试器；而 Attach 方式则是将 VSCode 调试器连接到已经运行中的应用程序或进程。我们这里用的是 Launch 方式。

在终端运行：

或点击VSCode 的小甲虫图标：

上面蓝色位置圈错了，应该是第一个 Node.js。

VSCode 十分智能，预设了很多针对不同需求的启动配置：

让我们来做进一步的修改：

之前那个启动配置项可以删除，留下这个需要的即可。

我们将 console 属性 设置为外部终端，我们启动调试时 VScode 就会自动打开下图中对应的终端(根据操作系统)。可以根据个人使用习惯，自定义用什么终端 (比如我在 VSCode 设置的 Terminal › External: Osx Exec，从默认的改为了 iTerm2)。

别忘了先把我们的脚本加上端口

使用 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 非常令人沮丧。并且在未来很多年都不会。