如何在 nx 工作区的 VSCode 中运行 NextJS 客户端调试器

Question

我在 nx 工作区中有 2 个前端应用程序运行，它们都是 next js 应用程序。客户端调试不工作，因为所有添加的断点和日志点都显示为 unbounded。但是附加的服务器端调试器工作得很好。

我有以下 launch.json vs 代码文件。

{
  // 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": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/super-admin/*"
      }
    },
    {
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "${workspaceFolder}/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    }
  ]
}

我猜它是由于打字稿和 nx 工作区配置而失败的，这在某种程度上与源映射有关。

NextJS 应用程序运行处于调试模式，因为我在 .env 文件中添加了以下内容，这是我通过查看 nx GitHub 问题得到的。

NODE_OPTIONS=--inspect=0.0.0.0:9229

以下是我的目录结构

project
├── apps
│   ├── org-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   ├── org-admin-e2e
│   │   ├── cypress.json
│   │   ├── src
│   │   │   ├── fixtures
│   │   │   │   └── example.json
│   │   │   ├── integration
│   │   │   │   └── app.spec.ts
│   │   │   └── support
│   │   │       ├── app.po.ts
│   │   │       ├── commands.ts
│   │   │       └── index.ts
│   │   └── tsconfig.json
│   ├── super-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   └── super-admin-e2e
│       ├── cypress.json
│       ├── src
│       │   ├── fixtures
│       │   │   └── example.json
│       │   ├── integration
│       │   │   └── app.spec.ts
│       │   └── support
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       └── tsconfig.json
├── babel.config.json
├── jest.config.js
├── jest.preset.js
├── libs
├── nx.json
├── package.json
├── package-lock.json
├── README.md
├── tools
│   ├── generators
│   └── tsconfig.tools.json
├── tsconfig.base.json
└── workspace.json

Answer 1

经过大量研究，以下内容launch.json 帮助我在 nx 工作区中调试 nextjs 应用程序的服务器端和客户端

{
  // 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": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    },
    {
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/super-admin/*"
      }
    },
    {
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "${workspaceFolder}/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    }
  ]
}

如何在 nx 工作区的 VSCode 中运行 NextJS 客户端调试器

How to run NextJS client side debugger in VSCode in nx workspace

typescript

tslint

visual-studio-code

vscode-debugger

nx.dev

如何在 nx 工作区的 VSCode 中 运行 NextJS 客户端调试器

How to run NextJS client side debugger in VSCode in nx workspace

typescript

tslint

visual-studio-code

vscode-debugger

nx.dev

如何在 nx 工作区的 VSCode 中运行 NextJS 客户端调试器