firefox-devtools / firefox-devtools/vscode-firefox-debug

Unable to set breakpoints for nextjs app

Abierto
#208 7 comentarios 3 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
447
Forks
76
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

I'm trying to debug my nextjs app with Firefox.

I managed to debug it with chrome.

The error is that firefox can't find the files.
I already tried to add pathMappings but that is a lot to do and it still does not find components that are used inside these mappings.
Besides that: the chrome extension does not need these path mappings.

// launch.json
```
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Firefox",
"url": "http://localhost:3000/",
"webRoot": "${workspaceFolder}",
"pathMappings": [
{"url": "/", "path": "${workspaceFolder}/pages/index.tsx"}
]
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "attach",
"name": "Server",
"port": 9229
}
],
"compounds": [
{
"name": "QLS: FullChrome",
"configurations": ["Server", "Chrome"]
},
{
"name": "QLS: FullFirefox",
"configurations": ["Server", "Firefox"]
}
]
}
```

With the specified pathMappings I can set breakpoints in `index.tsx`

My demo repo: https://github.com/Naxos84/nextjs-firefox-debug-demo

node version: 12.16.0
npm version: 6.13.4
vscode: 1.45.1
OS: windows 10

If you need any additional info please let me know.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el repositorio nextjs-firefox-debug-demo enlazado y reproduce el fallo de los puntos de interrupción usando la configuración de Firefox en launch.json. Compara la resolución de puntos de interrupción y archivos fuente para pages/index.tsx y los componentes anidados con Firefox frente a Chrome, y verifica después que Firefox resuelve los archivos relevantes sin extensos pathMappings.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
next.js, typescript, vscode
Área
devtools, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.