用于嵌套 create-react-app 目录的 VSCode chrome 调试器答案

【问题标题】：VSCode chrome debugger for nested create-react-app directory用于嵌套 create-react-app 目录的 VSCode chrome 调试器
【发布时间】：2022-07-05 22:16:31
【问题描述】：

我正在尝试使用节点构建一个项目并做出反应。这是我的项目；它所做的不仅仅是 hello world，就是这样：https://github.com/andrewnessinjim/react-node-kickstarter/tree/so-question

将此项目导入 vscode 并运行 docker-compose.yml 会启动该项目，如下所示：

我想在 vscode 中调试客户端代码。为此，我使用了此处提供的设置：https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code，但没有帮助。我根据我的假设将参数调整为以下，因为我使用的是 docker compose：

{
            "localRoot": "./client/src",
            "remoteRoot": "/app/client/src",
            "webRoot": "/app/client/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
}

我也试过{"localRoot": "${workspaceFolder}/client/src"}。我也试过this answer的配置。

我从“运行和调试”部分选择了“Chrome 启动”以打开附加了调试器的 Chrome，并在 App.tsx 的第 38 行放置了一个断点：

在每种情况下，断点都不会绑定，如下图断点旁边的灰色圆圈所示：

我认为配置需要调整，因为我在嵌套目录中有 create-react-app。我怎样才能使这项工作？如果有更好的方法来分享这类问题，请告诉我！我不确定这种情况是否适用于所有环境；它适用于 Ubuntu。

注意：我使用了启动类型 pwa-chrome，因为 chrome 现在已弃用。上述场景需要 VSCode docker 扩展。

编辑：我也在 Windows 中尝试过，但我遇到了同样的问题。我只需要使用 this answer 修复项目中的行尾，以使应用程序在 Windows 中运行。

【问题讨论】：

标签： docker visual-studio-code create-react-app

【解决方案1】：

我在我的 React 应用中进行了尝试，它与 docker-compose 一起使用。

我在 docker 中启动了应用程序，为 React App 公开了 3000 端口，为 Debug 公开了 9229 端口。访问地址为http://localhost:3000。

这是我的docker-compose.yml

version: "3.3"

services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: frontend.Dockerfile
    restart: unless-stopped
    ports:
      - "3000:3000"
      - "9229:9229"
    volumes:
      - ./frontend/:/app/
    working_dir: "/app"
    tty: true

frontend.Dockerfile

FROM node:16.15

WORKDIR /app

# Install Typescript Globally
RUN npm install -g typescript

所以我在VSCODE中配置launch.json进行调试，在"webRoot": "${workspaceFolder}/frontend"配置React App文件夹

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome for Debugging",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend"
    }
  ]
}

我在 VSCODE 中运行了Launch Chrome for Debugging，它启动了一个新的 chrome 窗口来调试应用程序。

测试于：

Ubuntu 22.04 LTS
Docker 版本 20.10.17
docker-compose 版本 1.29.2

【讨论】：