typescript - 如何调试编译的打字稿源代码？

Question

安装 typescript 包后，它编译为 js。从那以后，你只能看到一堆 js 文件和 xdts 和 xx.js.map。但有时，我想调试原始 ts 文件。有什么办法吗？

标签： typescript

Answer 1

一般的

如果您正在使用一种 src 文件夹，则可以使用 vscode 的启动设置。正如您已经编写的那样，您生成了调试应用程序所需的源映射。

如何在浏览器上做到这一点？

1. 获取支持开发中使用的浏览器的 VSCode 扩展。
   （Edge/Chrome/Firefox 工作正常）
2. 然后您需要在此路径下的项目中创建一个“launch.json”文件：

{projectRoot}/.vscode/launch.json

3. 在这个 json 文件中，您现在可以单击“添加配置”，您将在其中找到许多不同的调试器。您应该选择浏览器启动或附加。（启动显然会打开一个新实例并仅附加到浏览器的现有实例）

{browserName}：启动

4. 接下来，您需要设置您的 webroot。此属性应指向项目的 index.html（或 index.js/.ts）根文件所在的文件夹。（您可以使用 ${workspaceFolder} 获取 package.json 的路径）

示例：webRoot：“${workspaceFolder}/public”

5. （可选）现在您可能需要为源映射解析器设置一些覆盖，因为它们并不总是被找到。在这里，您需要在浏览器中打开您的应用程序，并在左侧树视图的“源”选项卡中搜索您的源映射（文件似乎是打字稿文件），并查看它们在哪个路径下可用。如果您找到该路径，则将其添加到您的覆盖并将其映射到您的源路径。

"sourceMapPathOverrides": {
  "webpack://app/*": "${workspaceFolder}/src/*"
}

如果您现在通过按 F5 启动该启动配置，您应该会得到一个带有工作断点的新浏览器窗口。

在 NodeJS 上怎么做？

步骤 1-3 完全相同，只是您需要选择最适合您需要的 node.js 配置。

根据您的设置，它应该在按下 F5 时工作。如果不能确保您在配置中使用了正确的入口点 (index.js/.ts)。