[英]VSCode breakpoints unbound when debugging a React app in a docker container
I'm having issues debugging with VSCode a React app created with Create React App and running in a Docker container.我在使用 VSCode 调试使用Create React App 创建并在 Docker 容器中运行的 React 应用程序时遇到问题。
The app runs fine with docker compose up
and it correctly stops its execution until I attach with the debugger.该应用程序在
docker compose up
运行良好,并且在我附加调试器之前它会正确停止执行。
However, after that, only breakpoints in the start.js
file behave correctly, while any other breakpoint in my source files stays unbound.但是,在那之后,只有
start.js
文件中的断点正常运行,而我的源文件中的任何其他断点都保持未绑定。
package.json package.json
I defined a new script start:debug
to run the application in inspect mode.我定义了一个新脚本
start:debug
以检查模式运行应用程序。
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.2",
"@mui/material": "^5.4.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"start:debug": "react-scripts --inspect-brk=0.0.0.0:9229 start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Dockerfile Dockerfile
FROM node:16-alpine
# Create app directory
WORKDIR /usr/src/app
# add `node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# Install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 3000
# Run app
CMD [ "npm", "run", "start:debug" ]
docker-compose.yml docker-compose.yml
version: '3'
services:
web:
image: test
container_name: test
build:
context: .
dockerfile: Dockerfile
volumes:
- ./src:/usr/src/app/src
env_file:
- ./.envs/.local/.node
ports:
- "3000:3000"
- "9229:9229"
.vscode/launch.json .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"restart": true,
"port": 9229,
"address": "localhost",
"trace": true,
"localRoot": "${workspaceFolder}",
"remoteRoot": "/usr/src/app",
"sourceMaps": true
},
]
}
I tried every configuration I could find but I did not manage to make it work.我尝试了所有我能找到的配置,但我没有设法让它工作。 Could anyone help me spot where the issue is?
谁能帮我找出问题所在?
If you are working with a web-based react app - you will need to run a web browser to debug it.如果您正在使用基于 Web 的 React 应用程序 - 您将需要运行 web 浏览器来调试它。 Here is a setup that I did:
这是我做的一个设置:
docker exec -ti react-ptc /bin/bash
docker exec -ti react-ptc /bin/bash
npm run eject
- required to manage webpack config laternpm run eject
- 需要稍后管理 webpack 配置npm run start
inside docker containernpm run start
Number 7 is necessary because otherwise VSCode will not be able to launch a web browser for debugging.数字 7 是必需的,否则 VSCode 将无法启动 web 浏览器进行调试。 Watch your permissions though.
不过请注意您的权限。 You may need to set bind mounted
/react
directory to host user permissions.您可能需要设置绑定挂载的
/react
目录来托管用户权限。
Here is part of docker-compose.yml
I used:这是我使用的
docker-compose.yml
的一部分:
version: '3'
services:
react-ptc:
image: 'dmitryr117/node:18.8.0-dev'
container_name: react-ptc
restart: unless-stopped
volumes:
- ./react:/app
environment:
- HOST=0.0.0.0
- PORT=80
- WDS_SOCKET_HOST=0.0.0.0
- WDS_SOCKET_PORT=0
expose:
- 80
ports:
- 8080:80
I am however running my system with an nginx
reverse proxy and using /etc/hosts
to emulate real domain name behaviour on local environment.但是,我正在使用
nginx
反向代理运行我的系统,并使用/etc/hosts
来模拟本地环境中的真实域名行为。
Now for launch.json
and webpack.config.js
现在
launch.json
和webpack.config.js
launch.json发射.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Brave Debug",
"url": "http://client.ptc.test", // can set to http://localhost:8080
"webRoot": "${workspaceFolder}",
"timeout": 20000,
"sourceMaps": true,
"breakOnLoad": true,
"runtimeExecutable": "/snap/bin/brave", // I am on Ubuntu using Brave web browser
"runtimeArgs": [
"--new-window",
"--incognito",
"--user-data-dir=${workspaceFolder}/chrome-profiles/ReactProfile",
"--remote-debugging-port=9222"
],
"sourceMapPathOverrides": {
// requires inline-source-map in webpack.config.js for devtool
// "browser-path": "web-root path"
// IMPORTANT AREA:
// Check sources in web browser DeveloperTools and change /app/ptc to
// your path above /src directory
"/app/ptc/*": "${webRoot}/*",
},
}
]
}
In previously ejected config
directory look for webpack.config.js
and update as wollows:在之前弹出的
config
目录中查找webpack.config.js
并更新为 wollos:
...
devtool: 'inline-source-map',
// isEnvProduction
// ? shouldUseSourceMap
// ? 'source-map'
// : false
// : isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
...
That's it.而已。 Also update your
.gitignore
to avoid committing browser profile:还要更新您的
.gitignore
以避免提交浏览器配置文件:
...
# browser_profile
/chrome-profiles
Should work from here.应该从这里开始工作。 Hope this helps.
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.