javascript - 使用 VSCode 调试 Nextjs Api 端点

Question

目前，我必须手动查找要在 /api 中设置断点的文件(api 端点) VSCode 中的文件夹。
我有以下 launch.json :

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

每当有对该特定 Nextjs Api 路由的传入请求时，有没有办法自动停止或设置断点？
例如，假设我有一个 /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!'});
}

并想在 console.log 上停下来在每个传入的请求上。我该怎么做？

Answer 1

单击 VSCode 的侧边栏以放置红点时，我遇到了同样的问题。
好消息是仍有办法。在 VSCode 中，与其单击在所需行上设置红点，不如在该行上编写调试器。不知道为什么它会以一种方式工作而不是另一种 - 也许还有一种调整可以使点击设置点真正起作用？到目前为止，这对我来说与 api 路由一样好:npm run dev现在使用以下 launch.json 附加调试器。 (我的 next.js 项目位于我的工作区文件夹的子文件夹中，所以我自己的配置需要反射(reflect)这一点。下面的配置假定 Next.js 项目根目录与 $workspaceFolder 相同。)

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

现在在 VSCode 中，无论您想要断点在哪里:

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

  console.log....
});

Should end up with something like this