Actualmente, tengo que encontrar manualmente qué archivo (punto final de API) establecer el punto de interrupción en la carpeta /api en VSCode.
Tengo el siguiente launch.json :
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to application", "skipFiles": ["<node_internals>/**"], "port": 9229 } ] }¿Hay alguna manera de detener o establecer automáticamente un punto de interrupción cada vez que haya una solicitud entrante para esa ruta específica de Nextjs Api?
Por ejemplo, digamos que tengo un /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!'}); } Y desea detenerse en console.log en cada solicitud entrante. ¿Cómo puedo hacerlo?
Estaba teniendo el mismo problema al hacer clic en la barra lateral en VSCode para colocar los puntos rojos.
La buena noticia es que todavía hay un camino. En VSCode, en lugar de hacer clic para establecer el punto rojo en la línea que desea, simplemente escriba depurador en esa línea. No estoy seguro de por qué funcionaría de una manera pero no de la otra. ¿Quizás hay un ajuste más que podría hacer que hacer clic para establecer puntos realmente funcione? Hasta ahora, esto es tan bueno para mí con las rutas api:
npm run dev
Ahora adjunte el depurador con el siguiente archivo launch.json. (Mi proyecto next.js estaba en una subcarpeta de mi carpeta de espacio de trabajo, por lo que mi propia configuración necesitaba reflejar eso. La configuración a continuación asume que la raíz del proyecto Next.js es la misma que $workspaceFolder).
{ "name": "Attach", "port": 9229, "request": "attach", "webRoot": "${workspaceFolder}", // mine had another subfolder here "cwd": "${workspaceFolder}", // and here "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" },Ahora en VSCode, donde quieras el punto de interrupción:
handler.get(async (req, res) => { debugger; console.log.... });Sé que puede ser demasiado tarde para responder, pero puede ser útil para otros. Simplemente seguí lo que se especificó aquí https://nextjs.org/docs/advanced-features/debugging y funcionó bien. Copie la parte relevante para la depuración de la pila completa y recuerde cambiar el directorio si su código está en una subcarpeta, por ejemplo, esto funcionó para mí
{ "name": "Next.js: debug full stack", "type": "node-terminal", "request": "launch", "command": "npm run dev", "cwd": "${workspaceFolder}/client", "serverReadyAction": { "pattern": "started server on .+, url: (https?://.+)", "uriFormat": "%s", "action": "debugWithChrome" } }