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

Unable to set breakpoints for nextjs app

Aperta
#208 7 commenti 3 reazioni 0 assegnatari Vedi su GitHub
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.