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

h5qlskok 于 2023-05-16 发布在 Docker

关注(0)|答案(2)|浏览(123)

我正在尝试使用Node和React构建一个项目。这是我的项目它比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

来源：https://stackoverflow.com/questions/70912742/vscode-chrome-debugger-for-nested-create-react-app-directory

2条答案

按热度按时间

q5lcpyga1#

我用我的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

赞(0）回复(0）举报 2023-05-16

ercv8c1e2#

不管你是如何服务你的webapp的。不管是不是 Docker 重要的是你关闭所有的chrome示例，让vscode使用下面的启动配置启动chrome示例，并启用调试器。

{
    "name": "Launch Chrome for Debugging",
    "request": "launch",
    "type": "chrome",
    "url": "https://localhost:3000/",
    "webRoot": "${workspaceFolder}/src",
    "userDataDir": false
},

赞(0）回复(0）举报 2023-05-16

我来回答

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

2条答案

相关问题

热门标签

最新问答