firefox-devtools / firefox-devtools/vscode-firefox-debug
Unable to set breakpoints for nextjs app
- Vorherrschende Sprache
- TypeScript
- Sterne
- 447
- Forks
- 76
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
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.
Beitragsleitfaden
Rechercherichtung
Beginne mit dem verlinkten nextjs-firefox-debug-demo-Repository und reproduziere den Haltepunktfehler unter Verwendung der Firefox-Konfiguration in launch.json. Vergleiche die Auflösung von Haltepunkten und Quelldateien für pages/index.tsx und verschachtelte Komponenten mit Firefox und Chrome und überprüfe anschließend, dass Firefox die relevanten Dateien ohne umfangreiche pathMappings auflöst.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- next.js, typescript, vscode
- Bereich
- devtools, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100