VS Code 或 Chrome 开发工具：调试 NPM Workspaces (monorepo) TypeScript + React 代码答案

【问题标题】：VS Code or Chrome Dev Tools: debug NPM Workspaces (monorepo) TypeScript + React codeVS Code 或 Chrome 开发工具：调试 NPM Workspaces (monorepo) TypeScript + React 代码
【发布时间】：2021-12-12 09:18:59
【问题描述】：

我有一个使用 NPM 工作区的 monorepo 设置。它看起来像这样：

应用程序
- 我的反应应用程序
包
- 共享包

my-react-app 和 shared-package 都用 TypeScript 重写。我的 React 应用程序在 localhost:3000 上启动。我可以同时使用 Chrome 开发工具和 VS Code 的调试器来中断主 React 应用程序中的代码（my-react-app 中的 ts 和 tsx 文件），但我无法在shared-package 中设置断点。

Chrome 开发工具

我可以在 Chrome 开发工具中看到 shared-package 的 TypeScript 文件（通过源映射），但那里的断点永远不会被命中。

VS 代码调试器

在launch.json里面有如下配置：

{
  "name": "Launch Edge",
  "request": "launch",
  "type": "pwa-msedge",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

我可以在my-react-app 但不能在shared-package 中设置断点。

如何使用 Chrome 开发工具或 VS Code 的调试器在 monorepo 包中获取断点？

【问题讨论】：

很抱歉，这很明显，但是共享包中的代码是如何运行的？作为 react-application 中的导入，由调试器监控？
@SethLutske 是的，完全正确。 React 应用程序导入已编译的 JavaScript 文件。与编译后的 JavaScript 文件一起是指向原始 TypeScript 文件的源映射。我在这里提供了我的设置的更多详细信息：stackoverflow.com/q/66785791/188740
啊。问题可能是尽管您在源图中看到了断点，但这实际上并不是 chrome 正在运行的代码。查看How to use breakpoints in sourcemaps (Chrome DevTools)，你可能会在那里找到一些线索

标签： typescript google-chrome-devtools vscode-debugger monorepo npm-workspaces

【解决方案1】：

2020-01-18 更新： Create React App 发布 v5.0.0，其中：

#8227添加 source-map-loader 用于调试到 node_modules 的原始源包含源映射的库 (@justingrant)

有了这个改变，调试器将深入模块的源映射，所以对于我们这些有幸使用 CRA 的人来说，这个问题就解决了。 ?

原答案

我让它工作了，但遗憾的是我正在调试已编译的 JavaScript，而不是依赖包中的源 TypeScript（例如，上面示例中的 packages/shared-package）。

这是我的 launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Attach React App",
      "url": "http://localhost:3030", // Or whatever port your app is running on
      "webRoot": "${workspaceFolder}/apps/my-react-app"
    }
  ]
}

很难找到要附加断点的文件，但是如果您在源 TypeScript 文件中添加 debugger;，那么 VS Code 将在编译后的文件上中断。从那时起，您可以在编译后的文件中添加任意数量的断点，VS Code 将停止它们。

使用 F5 启动调试器，然后观察您的调试器：

注意：向您的 React 应用程序添加断点（例如apps/my-react-app）将按预期工作，您将调试您的源 TypeScript 文件。调试编译文件的问题只有在你想给依赖包加断点的时候才出现。

【讨论】：