Как запустить отладчик на стороне клиента NextJS в VSCode в рабочей области nx
У меня есть 2 интерфейсных приложения, работающих в рабочей области nx, оба они являются следующими js-приложениями. Отладка на стороне клиента не работает, поскольку все добавленные точки останова и точки журнала отображаются как неограниченные. Но подключенный отладчик на стороне сервера работает отлично.
У меня есть следующий файл 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
Ниже приведена моя структура каталогов
remotely
├── 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
2 ответа
Основываясь на вашем ответе и руководстве по отладке NX , я также придумал решение, которое будет работать как на клиенте, так и на сервере. Он запускает сервер, но я полагаю, что его также можно использовать для подключения к работающему серверу, аналогично тому, как вы запускаете «Администратор организации | Сторона сервера». То же самое с использованием 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 с помощью этого метода.
После долгих исследований следующий файл launch.json помог мне отладить как серверную, так и клиентскую сторону приложения nextjs в рабочей области nx.
{
// 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"
}
]
}