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

Question

我已经使用 NPM Workspaces 进行了 monorepo 设置。它看起来像这样：

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

my-react-app 和 shared-package 都用 TypeScript 重写了。我的 React 应用程序在 localhost:3000 上启动。我可以同时使用 Chrome Dev Tools 和 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 Dev Tools 或 VS Code 的调试器在 monorepo 包中设置断点？

Answer 1

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

#8227 Add source-map-loader for debugging into original source of node_modules libraries that contain sourcemaps (@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 文件。调试编译文件的问题只有当你想给依赖包加断点的时候才会出现

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

VS Code or Chrome Dev Tools: debug NPM Workspaces (monorepo) TypeScript + React code

google-chrome-devtools

typescript

monorepo

vscode-debugger

npm-workspaces