javascript - Ladenie koncových bodov Nextjs API pomocou VSCode

Momentálne musím manuálne nájsť, v ktorom súbore (API endpoint) mám nastaviť breakpoint v priečinku /api vo VSCode.

Mám nasledujúci launch.json:

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

Existuje spôsob, ako automaticky zastaviť alebo nastaviť breakpoint kedykoľvek príde požiadavka na konkrétnu Nextjs API trasu?

Napríklad, povedzme, že mám /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!'});
}

A chcem zastaviť na console.log pri každom prichádzajúcom požiadavke. Ako to môžem urobiť?

Odpoveď č. 1

Mal som rovnaký problém kliknutím na postranný panel vo VSCode, aby som umiestnil červené bodky.

Dobrá správa je, že stále existuje riešenie. Vo VSCode namiesto toho, aby ste klikli a nastavili červenú bodku na riadku, ktorý chcete, jednoducho napíšte na tom riadku debugger. Nie je jasné, prečo by to fungovalo jedným spôsobom, ale nie druhým - možno existuje ešte jedno nastavenie, ktoré by umožnilo, aby nastavovanie bodiek kliknutím skutočne fungovalo? Zatiaľ je to pre mňa najlepšie riešenie s API trasami:

npm run dev

Teraz pripojte debugger s nasledujúcim launch.json. (Môj projekt next.js bol v podpriečinku mojej pracovnej zložky, takže moja vlastná konfigurácia to musela odrážať. Nižšie uvedená konfigurácia predpokladá, že koreň projektu Next.js je rovnaký ako $workspaceFolder.)

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

Teraz vo VSCode, kdekoľvek chcete bod prerušenia:

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

  console.log....
});

Malo by to skončiť niečím takýmto

Odpoveď č. 2

Mám rovnaký problém, ale vyriešil som ho dvoma krokmi:

  1. Pridajte riadok do súboru settings.json vo VSCode: "debug.javascript.usePreview": false

  2. Nepoužívajte NODE_OPTIONS="--inspect"

Potom stále môžete vidieť nezviazaný bod prerušenia, ale spustite aplikáciu a znova nastavte bod prerušenia, bude červený a bude fungovať správne.

Aktualizovať

Niekedy mám stále problém s nastavením breakpointu na API, takže som si vyhradil niekoľko hodín, aby som zistil, čo je skutočný problém. Nakoniec som našiel príčinu:

Pretože keď spustíte aplikáciu Nextjs, Node najprv spustí skript next, potom skript next vytvorí dcérsky proces, ktorý je váš vlastný kód. Nextjs tiež automaticky nastaví NODE_OPTIONS=--inspect, keď používate režim vývoja, ale používa iné číslo portu a číslo sa automaticky mení. HLAVNÝ BOD je: Skript Next a dcérsky proces budú mať rôzne čísla portov na ladenie. To je dôvod, prečo niekedy nemôžete nastaviť body prerušenia.

Existujú niektoré scenáre:

  1. Ak spustíte svoj server manuálne v termináli VSCODE zadaním „npm run dev“, VSCODE automaticky nájde debugovacie porty a bude všetko v poriadku.
  2. Ak spustíte svoj server mimo VSCODE z terminálu a potom použijete attach, VSCODE pripojí iba jeden port, obvykle iba k skriptu Nextjs. Preto nemôžete nastaviť bod prerušenia vo vlastnom kóde.
  3. Ak použijete metódu launch na spustenie servera v súbore launch.json, nastane rovnaký problém ako pri č. 2. Nemôžete nastaviť svoj breakpoint.

Existuje jednoduchý spôsob, ako vyriešiť problém: Buď spustite server z interného terminálu VSCODE, alebo do launch.json pridajte:

  "autoAttachChildProcesses": true,

potom môžete začať ladenie stlačením F5 a všetko pôjde dobre.

   {
      "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,
    }

Nemusíte pridávať NODE_OPTION='--inspect', ani "debug.javascript.usePreview": false