javascript - Feilsøking av Nextjs API-endepunkter ved hjelp av VSCode

For øyeblikket må jeg manuelt finne hvilken fil (API-endepunkt) jeg skal sette breakpoint i /api-mappen i VSCode.

Jeg har følgende launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to application",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

Finnes det en måte å automatisk stoppe eller sette et stoppunkt når det kommer en forespørsel til den spesifikke Nextjs API-ruten?

For eksempel, la oss si at jeg har en /api/data.tsx :

import { NextApiRequest, NextApiResponse } from 'next';
import { StatusCodes } from 'http-status-codes';
import getConfig from 'next/config';

export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   console.log('do some logging');
   res.status(StatusCodes.OK).json({message: 'Good job buddy!'});
}

Og vil stoppe på console.log ved hver innkommende forespørsel. Hvordan kan jeg gjøre det?

Svar #1

Jeg hadde samme problemet med å klikke på sidemenyen i VSCode for å plassere de røde prikkene.

Den gode nyheten er at det fortsatt finnes en måte. I VSCode, i stedet for å klikke for å sette den røde prikken på linjen du vil, skriv bare debugger på den linjen i stedet. Ikke sikker på hvorfor det skulle fungere på en måte men ikke den andre - kanskje det finnes en justering til som kan gjøre at det å klikke for å sette prikker faktisk fungerer? Så langt er dette så bra som det blir for meg med API-rutene:

npm run dev

Nå kobler du til feilsøkeren med følgende launch.json. (Mitt Next.js-prosjekt lå i en undermappe av arbeidsområdet mitt, så min egen konfigurasjon måtte reflektere det. Konfigurasjonen nedenfor antar at Next.js-prosjektets rotmappe er den samme som $workspaceFolder.)

{
    "name": "Attach",
    "port": 9229,
    "request": "attach",
    "webRoot": "${workspaceFolder}", // mine had another subfolder here
    "cwd": "${workspaceFolder}",     // and here
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "pwa-node"
},

Nå i VSCode, hvor som helst du vil ha brytpunktet:

handler.get(async (req, res) => {
  debugger;

  console.log....
});

Bør ende opp med noe som dette

Svar #2

Jeg har det samme problemet, men løst i to trinn:

  1. Legg til en linje i VSCode settings.json: "debug.javascript.usePreview": false

  2. Ikke bruk NODE_OPTIONS="--inspect"

Da kan du fortsatt se udefinert pausepunkt, men kjør appen og sett pausepunktet igjen, det vil være rødt og fungerer godt.

Oppdater

Noen ganger har jeg fortsatt problemer med å sette et breakpoint på API-en, så jeg brukte noen timer på å finne ut hva det virkelige problemet var. Endelig fant jeg problemet:

Fordi når du kjører en Nextjs-app, vil Node først kjøre next-skriptet, deretter vil next-skriptet starte en underprosess som er din egen kode. Nextjs setter også automatisk NODE_OPTIONS=--inspect når du bruker utviklingsmodus, men den bruker et annet portnummer og tallet endres automatisk. HOVEDPOENGET er: Next-skriptet og underprosessen vil ha forskjellige portnumre for feilsøking. Det er grunnen til at du noen ganger ikke kan sette brytepunkter.

Det finnes noen scenarier:

  1. Hvis du starter serveren din manuelt i VSCODE-terminalen ved å skrive "npm run dev", vil VSCODE automatisk finne feilsøkingsportene, og du vil være i orden.
  2. Hvis du starter serveren din utenfor VSCODE fra en terminal, og deretter bruker attach, vil VSCODE bare koble til én port, vanligvis bare koblet til Nextjs-scriptet. Derfor kan du ikke sette et breakpoint i din egen kode.
  3. Hvis du bruker launch-metoden for å starte serveren i launch.json, vil samme problem som nummer 2 oppstå. Du kan ikke sette ditt breakpoint.

Det finnes en enkel måte å løse problemet på: Enten start serveren fra VSCODEs interne terminal eller legg til i launch.json:

  "autoAttachChildProcesses": true,

så kan du starte feilsøking ved å trykke F5, og alt går bra.

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }

Du trenger ikke å legge til NODE_OPTION='--inspect', heller ikke "debug.javascript.usePreview": false