firefox-devtools / firefox-devtools/vscode-firefox-debug
Unable to set breakpoints for nextjs app
- Lingua principale
- TypeScript
- Stelle
- 447
- Fork
- 76
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con il repository nextjs-firefox-debug-demo collegato e riproduci il malfunzionamento del breakpoint utilizzando la configurazione di Firefox in launch.json. Confronta la risoluzione dei breakpoint e dei file sorgente per pages/index.tsx e i componenti annidati con Firefox rispetto a Chrome, quindi verifica che Firefox risolva i file pertinenti senza pathMappings estesi.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- next.js, typescript, vscode
- Ambito
- devtools, frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100