VS Code：在 Node.js 调试器中单步执行库函数时调试 TS 代码

Question

我已经在 TS 中编写了一个库和一个测试我的库的程序。我已经为库和程序启用了源映射，并且我正在使用 node.js 调试器。

调试程序的 TS 代码是有效的，但是一旦我进入库函数的调用，我就会调试发出的 JS 代码而不是我的 TS 源。

我将库的 package.json 的 'files' 字段设置为 [ "lib" ]，其中 lib 是包含 JS 文件以及源映射的目录，但这并没有改变任何内容。

我还有另一种方法告诉 VS Code 它应该使用我的库的源映射吗？

Answer 1

我终于找到了解决办法。当然，问题是 VS Code 调试适配器找不到该库的源文件。解决该问题的关键是 lib 项目的 tsconfig.json 中的 "sourceRoot" 选项。

考虑 dir myLib 中的一个 lib 项目和 dir myProg 中的另一个从 myLib 导入函数的项目。 lib 的源文件位于 myLib/src 中，转译后的 js 文件以及源映射位于 myLib/dist 中。 myLib 和 myProg 驻留在同一父目录中。

现在，当我调试 myProg 时，我希望能够单步调用从 myLib 导入的函数并调试其 TS 源。

关于存储在库的源映射中的源文件的路径，重要的是要知道相对路径是相对于源映射来解析的。

让我们看一下库的源映射之一中的“sources”数组：

"sources":["../src/main.ts"]

由于我们正在运行 myProg，因此该路径为 myProg/src/main.ts，但这不是 lib 的 main.ts 的路径。

现在，我们将

"sourceRoot": "../../myLib/src/"

添加到库的 tsconfig.json 中。我们看到源图的相关部分已经变成了

"sourceRoot":"../../myLib/src/","sources":["main.ts"]

由于该路径是相对于 myProg/dist 解析的，因此它得到 myLib/src/main.ts。

现在，我们只需要告诉 VS Code 在 myLib/dist 中查找源映射，这会导致 myProg 的 launch.json 中的 “outFiles” 值如下：

"outFiles": [
    "${workspaceFolder}/dist/*.js",
    "${workspaceFolder}/../myLib/dist/*.js"
]

就是这样。您甚至可以在 myLib 的 .ts 文件中设置断点。他们会被击中，但我观察到他们被击中的顺序是错误的。 在这种情况下，请在第一次调用来自 myLib 的导入之前在 myProg 中设置断点。 我没有进行广泛的测试，但根据我的观察，这似乎解决了这个问题。

如果你和我有同样的经历，即你按了F5，程序就运行了，没有遇到任何断点，只需一遍又一遍地按F5，直到它起作用。 我使用 @builtin @id:ms-vscode.js-debug 以及 @id:ms-vscode.js-debug-nightly 进行了测试，每个都带有

"type": "node"

和

"type": "pwa-node"

，但这并没有改变任何东西。 如果您在启动之前打开入口点文件并在其中有断点，则似乎需要更少的启动才能工作，但我也没有对此进行广泛的测试，因此它可能只是偶然发生的。

Answer 2

这里重要的是在库中包含 typescript 源代码，并配置 launch.json 以正确解析源映射位置

这里我有一个视频解释了node_modules内的更改和调试打字稿代码

https://www.youtube.com/watch?v=YmpsFYoJzTE