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

Question

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

我有下面的启动。

{
// 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/*"
}
}
]
}

我猜它失败的原因是typescript和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

根据您的回答和NX调试指南，我也提出了一个解决方案，将运行客户端和服务器。它启动服务器，但我想它也可以用来连接到一个正在运行的服务器，类似于你运行"Org Admin |服务器端"的方式。使用Edge而不是Chrome也是一样。关键是客户端需要WebRoot，服务器需要SourceMap参数，serverReadyAction用于启动服务器上的客户端启动成功。

{
"version": "0.2.0",
"configurations": [
{
// **1**
"name": "Launch Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/apps/<application>",
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "nx run <application>:serve",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceFolder}/apps/<application>/*",
"webpack:///../../libs/*": "${workspaceFolder}/libs/*",
},
"serverReadyAction": {
"action": "startDebugging",
// Must me the same as **1**
"name": "Launch Client",
// Must be the same as the [ready] output from the server
"pattern": "on http://localhost:4200" 
}
}
]
}

注意:我不需要在这个方法中设置——inspect。

Answer 2

经过大量的研究后，以下推出。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"
}
]
}