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

Question

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

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

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

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

Answer 1

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

现在，我们添加"sourceRoot": "../../myLib/src/"到 lib 的 tsconfig.json。我们看到源图的相关部分已经变成了

\n

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

\n

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

\n

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

\n

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

\n

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

\n

如果您遇到像我一样的情况，即您按 F5 并且程序只是运行而没有遇到任何断点，只需一次又一次按 F5 直到它起作用。\n我使用 @builtin @id:ms-vscode.js-debug 进行了测试以及 @id:ms-vscode.js-debug-nightly，每个都带有"type": "node"和"type": "pwa-node"，但这并没有改变任何内容。\n如果您打开入口点文件并休息一下，似乎需要更少的启动才能工作在启动之前指出它，但我也没有对此进行广泛的测试，所以它可能只是偶然发生的。

\n