javascript - Nextjs API-päätepisteiden virheenkorjaus VSCodea käyttämällä

Tällä hetkellä minun täytyy manuaalisesti löytää, mihin tiedostoon (API-päätepisteeseen) asetetaan breakpoint koodikansiossa /api VSCodessa.

Minulla on seuraava launch.json:

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

Onko olemassa tapa automaattisesti pysäyttää tai asettaa breakpoint aina kun kyseiseen tiettyyn Nextjs API-reittiin tulee saapuva pyyntö?

Esimerkiksi, sanotaan että minulla on /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!'});
}

Ja haluan pysähtyä console.log jokaisen saapuvan pyynnön kohdalla. Kuinka voin tehdä sen?

Vastaus #1

Minulla oli sama ongelma, kun klikkasin sivupalkkia VSCodessa asettaakseni punaiset pisteet.

Hyvä uutinen on, että vielä on olemassa tapa. VSCodessa, sen sijaan että klikkaisit asettaaksesi punaisen pisteen haluamallesi riville, kirjoita vain debugger sille riville. En ole varma, miksi toinen tapa toimisi eikä toinen - ehkä on vielä yksi säätö, joka voisi saada pisteiden asettamisen klikkaamalla toimimaan? Tähän mennessä tämä on minulle paras tapa API-reittien kanssa:

npm run dev

Liitä nyt virheenkorjaaja seuraavalla launch.json-tiedostolla. (Next.js-projektini oli työtilakansion alikansiossa, joten oma asetukseni tarvitsi ottaa tämä huomioon. Alla oleva asetus olettaa, että Next.js -projektin juurikansio on sama kuin $workspaceFolder.)

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

Nyt VSCodessa, mihin tahansa kohtaan, johon haluat taukopisteen:

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

  console.log....
});

Pitäisi päätyä johonkin tällaiseen

Vastaus #2

Minulla on sama ongelma, mutta sen ratkaisin kahdella vaiheella:

1. Lisää rivi VSCode settings.json -tiedostoon: "debug.javascript.usePreview": false

2. Älä käytä NODE_OPTIONS="--inspect"

Sitten saatat silti nähdä sitomattoman taukopisteen, mutta käynnistä sovellus ja aseta taukopiste uudelleen, se tulee punaiseksi ja toimii hyvin.

Päivittää

Joskus minulla on edelleen ongelmia asettaa katkaisupiste API:lle, joten käytin muutaman tunnin selvittääkseni, mikä on todellinen ongelma. Lopulta löysin ongelman:

Koska kun ajat Nextjs-sovellusta, Node suorittaa ensin next-skriptin, sitten next-skripti luo lapsiprosessin, joka on sinun oma koodisi. Nextjs myös asettaa automaattisesti NODE_OPTIONS=--inspect kun käytät kehitystilaa, mutta se käyttää eri porttinumeroa ja numero muuttuu automaattisesti. AVAINKOHTA on: Next-skripti ja lapsiprosessi käyttävät eri vianetsintäporttinumeroa. Tämä on syy siihen, miksi et joskus voi asettaa taukokohtia.

On olemassa joitakin skenaarioita:

1. Jos käynnistät palvelimesi manuaalisesti VSCODEn terminaalissa kirjoittamalla "npm run dev", VSCODE löytää automaattisesti virheenkorjausportit ja kaikki on kunnossa.
2. Jos käynnistät palvelimesi VSCODEN ulkopuolella terminaalista ja käytät sitten attach, VSCODE liittää vain yhden portin, yleensä vain Nextjs-skriptiin. Siksi et voi asettaa taukopistettä omaan koodiisi.
3. Jos käytät launch-metodia käynnistääksesi palvelimen launch.json-tiedostossa, sama ongelma kuin kohdassa 2 ilmenee, et voi asettaa breakpointeja.

Ongelman ratkaisemiseen on yksinkertainen tapa: Aloita joko palvelin VSCODEn sisäisestä päätelaitteesta tai lisää launch.json-tiedostoon:

  "autoAttachChildProcesses": true,

sitten voit aloittaa virheenkorjauksen painamalla F5 ja kaikki menee hyvin.

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

Sinun ei tarvitse lisätä NODE_OPTION='--inspect', etkä myöskään "debug.javascript.usePreview": false