Как запустить отладчик на стороне клиента 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"
    }
  ]
}

Другие вопросы по тегам