VSC 如何为包含 docker 的 React/Next.js 应用程序设置调试配置答案

【问题标题】：VSC How to setup a debug configuration for a docker-contained React/Next.js AppVSC 如何为包含 docker 的 React/Next.js 应用程序设置调试配置
【发布时间】：2023-02-15 07:21:09
【问题描述】：

包.json：

{
  "name": "nextjs-with-typescript",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    ...
  },
  "dependencies":{
    "next": "12.1.5",
    "react": "latest"
  },
  "@types/react": "latest"
}

这就是我启动应用程序的方式：

docker-compose up 设置和运行基于 docker 的数据库
npm run dev 启动next 服务器
然后启动一个新的Chrome到localhost:3000来访问应用程序
launch.json，添加Attach by Process ID调试api后端
在 index.tsx 中设置的断点未命中，添加 Attach to Chrome 无济于事。 Chrome F12，Sources 选项卡不显示任何前端代码。

我想在 Launch.json 中添加一个配置，以便能够一键启动调试 VSC 中的前端 Chrome react/tsx 和后端 .ts。

我的 VSC：
```
Version: 1.63.1 (system setup)
Commit: fe719cd3e5825bf14e14182fddeb88ee8daf044f
Date: 2021-12-14T02:13:54.292Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19044
```

【问题讨论】：

使用 Docker 在 VS Code 中设置调试器是否幸运？

标签： reactjs docker visual-studio-code next.js

【解决方案1】：

同样的问题。先生你解决了id吗

【讨论】：