0

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

  • 应用
    • 我的反应应用
  • 包
    • 共享包

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

Chrome 开发工具

我可以在 Chrome 开发工具中看到shared-package's 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 包中获取断点？

4

1 回答 1

0

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

#8227添加用于调试的源映射加载器到包含源映射的 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"
    }
  ]
}

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

启动调试器F5并观察你的调试器：

在此处输入图像描述

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

于 2021-11-27T18:51:16.180 回答