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

Unable to set breakpoints for nextjs app

Offen
#208 7 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.