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

Posted 2023-03-08

【中文标题】Visual Studio Code 不会正确踩到 TypeScript 代码

【英文标题】：Visual Studio Code won't properly step on TypeScript code

【发布时间】：2020-07-25 06:41:35

【问题描述】：

我正在尝试将 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"
    

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

【问题讨论】：

您是否尝试过内联源映射？也许 VS 未能加载源映射。 （在您的 TS 编译器选项中：“inlineSourceMap”：true）

@WolverinDEV 谢谢，我刚试过但不幸的是它没有解决问题，行为仍然与我描述的相同

我没有看到任何用于构建代码的预启动任务。您能否确认您的代码已构建并且是最新的（连同您的源图）？我们可以看看你的构建任务吗？

您是否在您的 launch.json 配置中尝试过 "disableOptimisticBPs": true？

@MikePatrick 我刚刚尝试过，但不幸的是它并没有改变任何东西，我编辑了我的问题，并带有一个指向该问题的最小复制器的链接，似乎导入任何东西并使用它的类型会导致问题

【参考方案1】：

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

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

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

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

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

我创建了一个pull-request。

【讨论】：

非常感谢您的回答并创建一个拉取请求来解决这些问题，不幸的是它没有解决我拥有的更复杂项目的问题，我认为我发布的简化版本在 GitHub 上是我所经历的完美再现，但似乎必须有额外的差异仍然会导致问题。不管怎样，非常感谢您的帮助，这仍然是我在这个问题上看到的最大改进:)

编辑了我的问题，并带有一个仍然可以证明问题的回购链接

我克隆了更新的存储库，确实 vs 代码确实在断点处停止，但无法正确浏览代码。我会尝试从一个空白项目开始，看看何时出现此问题。如果我发现了什么，我会告诉你。

对不起，我看到赏金已自动授予但减少了一半，我不认为是这样，否则我会在赏金期结束后立即授予它完成。