Visual Studio Code 不会正确踩到 TypeScript 代码

Question

我正在尝试将 Visual Studio Code 配置为使用 TypeScript（在 Node 包中），我还使用 ts-jest/Jest 来创建测试，此外，我还安装了 Jest 扩展。

我已经能够弄清楚如何使断点工作，但现在我注意到我无法正确地单步执行我的代码，我什至不能 100% 确定断点能正常工作。

单击 step 按钮时，执行将恢复，并且不会在下一行再次停止，使其停止的唯一方法是在我想要的位置放置其他断点。代码确实停在断点已设置 AFAICT 的正确位置。

编辑：实际上，单步有时会再次停止，但似乎是执行中的 js 代码（例如，console.log 单步执行与日志记录相关的代码，但永远不会再单步执行我的代码)

编辑#2：通过尝试用更简单的项目重现问题，我意识到不再导入我正在使用的库（Phaser）可以解决问题，我希望这可以帮助隔离问题的原因。

编辑 #3： 这是一个链接，可以重现我正在谈论的问题：https://github.com/adtrevor/VSCodeDebugIssue 如果你想测试它，只需克隆它，npm install 并从运行/调试面板启动“调试 Jest 测试”任务。在hey.ts 的line 23 上设置断点（barFunction() 的第一条指令），调试器将停在那里，但是如果您单步执行代码，您应该注意到在某些时候您离开了当前范围（在执行@987654329 之后@ 在我的情况下）并且永远不会回到它。

编辑 #4： 这是一个更完整的示例，显示了问题 https://github.com/adtrevor/TSVSCodeSOQuestion/。如果你克隆它，安装依赖项，并在 ChunkManager.ts 的第 156 行设置断点，你会注意到即使我应用了@GiacomoDeLiberali 的更改，单步运行也没有正常运行。不过，也许这个错误是相关的。

我完全不知道配置有什么问题，也不知道应该先看哪里，因为我没有关于调试的其他错误消息。这是我的配置文件的内容：

launch.json

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Jest Tests",
      "cwd": "${workspaceFolder}",
      "args": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand",
        "--config",
        "${workspaceRoot}/jest.config.js"
      ],
      "windows": {
        "args": [
          "--inspect-brk",
          "${workspaceRoot}/node_modules/jest/bin/jest.js",
          "--runInBand",
          "--config",
          "${workspaceRoot}/jest.config.json"          
        ],
      },
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
    },
  ]
}

settings.json

{
    "editor.fontSize": 14,
    "workbench.colorTheme": "Default Light+",
    "window.autoDetectColorScheme": true,
    "debug.node.autoAttach": "off",
    "jest.pathToConfig": "./jest.config.js",
}

jest.config.json

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  rootDir: './src/'
};

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "CommonJS",
        "strict": true,
        "noImplicitAny": true,
        "allowJs": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": "./src",
        "noEmit": false,
        "outDir": "./build/",

        "paths": {
          "~/*": ["./*"]
        },
        "typeRoots": [
            "node_modules/@types",
            "node_module/phaser/types"
        ],
        "types": [
            "phaser",
            "jest"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

最后是我的 Package.json：

{
    "name": "mypackagename",
    "description": "Client for the game",
    "version": "0.1.0",
    "dependencies": {
        "phaser": "^3.22.0",
        "tslib": "^1.11.1"
    },
    "devDependencies": {
        "@types/jest": "^25.2.1",
        "bufferutil": "^4.0.1",
        "canvas": "^2.6.1",
        "jest": "^25.2.7",
        "ts-jest": "^25.3.1",
        "typescript": "^3.8.3",
        "utf-8-validate": "^5.0.2"
    }
}

你觉得这个配置有什么不寻常的地方吗？一般来说，这种行为的原因可能是什么？

Answer 1

我已经克隆了你发布的 repo，它是 VS Code 的 known issue。

尝试在 launch.json 中添加这些行：

      "smartStep": true, 
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**"
      ]

smartStep：自动单步执行无法映射回原始源的生成代码。

skipFiles：调试时要跳过的文件的 glob 模式数组。

我创建了一个pull-request。