javascript - Menyahpepijat titik akhir Api Nextjs menggunakan VSCode

Pada masa ini, saya perlu mencari secara manual fail (endpoint API) yang perlu saya tetapkan breakpoint dalam folder /api di VSCode.

Saya mempunyai launch.json berikut:

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

Adakah terdapat cara untuk secara automatik menghentikan atau menetapkan titik henti setiap kali terdapat permintaan masuk ke Laluan API Nextjs tertentu itu?

Sebagai contoh, katakan saya mempunyai /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!'});
}

Dan ingin berhenti pada console.log pada setiap permintaan yang masuk. Bagaimana saya boleh melakukannya?

Jawapan #1

Saya menghadapi masalah yang sama ketika mengklik bar sisi di VSCode untuk meletakkan titik merah.

Berita baiknya ialah masih ada cara. Dalam VSCode, daripada mengklik untuk menetapkan titik merah pada baris yang anda mahu, tulis sahaja debugger pada baris itu. Tidak pasti mengapa ia berfungsi dengan satu cara tetapi tidak dengan cara yang lain - mungkin ada satu lagi penyesuaian yang boleh membuatkan klik untuk menetapkan titik benar-benar berfungsi? Setakat ini, ini adalah yang terbaik bagi saya dengan laluan API:

npm run dev

Sekarang sambungkan debugger dengan launch.json berikut. (Projek Next.js saya berada dalam subfolder folder workspace saya, jadi konfigurasi saya sendiri perlu mencerminkan itu. Konfigurasi di bawah mengandaikan root projek Next.js adalah sama dengan $workspaceFolder.)

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

Sekarang di VSCode, di mana sahaja anda mahu titik hentian:

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

  console.log....
});

Sepatutnya berakhir dengan sesuatu seperti ini

Jawapan #2

Saya mempunyai masalah yang sama, tetapi diselesaikan dengan dua langkah:

1. Tambah satu baris dalam settings.json VSCode: "debug.javascript.usePreview": false

2. Jangan gunakan NODE_OPTIONS="--inspect"

Kemudian anda mungkin masih melihat titik henti yang tidak terikat, tetapi jalankan aplikasi dan tetapkan semula titik hentinya, ia akan berwarna merah dan berfungsi dengan baik.

Kemas kini

Kadang-kadang, saya masih menghadapi masalah dengan menetapkan breakpoint pada API, jadi saya mengambil beberapa jam untuk mengetahui apa masalah sebenar. Akhirnya saya menemui isu tersebut:

Kerana apabila anda menjalankan aplikasi Nextjs, Node akan terlebih dahulu menjalankan skrip next, kemudian skrip next akan memulakan proses anak yang merupakan kod anda sendiri. Nextjs juga secara automatik menetapkan NODE_OPTIONS=--inspect apabila anda menggunakan mod dev, tetapi ia menggunakan nombor port yang berbeza dan nombornya berubah secara automatik. TITIK UTAMA ialah: Skrip Next dan proses anak akan mempunyai nombor port penyahpepijatan yang berbeza. Itulah sebabnya kadang-kadang anda tidak dapat menetapkan titik henti.

Terdapat beberapa senario:

1. Jika anda memulakan pelayan anda secara manual di terminal VSCODE dengan menaip "npm run dev", VSCODE akan secara automatik mencari port penyahpepijatan dan anda akan baik-baik sahaja.
2. Jika anda memulakan server anda di luar VSCODE dari terminal, dan kemudian menggunakan attach, VSCODE hanya akan melampirkan satu port, biasanya hanya dilampirkan pada skrip Nextjs. Itu sebabnya anda tidak boleh menetapkan breakpoint dalam kod anda sendiri.
3. Jika anda menggunakan kaedah launch untuk memulakan server dalam launch.json. Maka masalah yang sama akan berlaku seperti No.2, anda tidak boleh menetapkan breakpoint anda.

Terdapat cara mudah untuk menyelesaikan masalah ini: Samada mulakan pelayan dari terminal dalaman VSCODE atau dalam launch.json, tambah:

  "autoAttachChildProcesses": true,

kemudian anda boleh mula menyahpepijat dengan menekan F5 dan semuanya berjalan dengan baik.

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

Anda tidak perlu menambah NODE_OPTION='--inspect', mahupun "debug.javascript.usePreview": false