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

Debugging react app with hot-reloading does not work

Aperta
#215 5 commenti 0 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

Steps to reproduce:

1. create new react app: `npx create-react-app my-app`
1. start react app: `export BROWSER=none && yarn start`
1. start debugging in vscode - see `launch.json` below
1. set a breakpoint in App.js file
1. change some code in App.js file, e.g. add a `console.log('foo')`

Result:
After changing anything in App.js file, and the changed code gets hot-reloaded in the dev server, no breakpoint is hit anymore.
Sometimes breakpoints are still hit and code execution stops but at the wrong line in the vscode editor. This usually happens if you remove or add lines of code in a file, where you previously set a breakpoint. It seems as if the debugger still stops at the line where the breakpoint was before adding / removing lines of code.

Expected Result:
all breakpoints should still be working after changing and hot-reloading code

Note:
Debugging works as expected as long as I restart the dev server (`yarn start`) after every code change. But I think that is not the way it was intended to be done?

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": [
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
```

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il problema con i passaggi indicati di create-react-app, `yarn start`, `App.js` e il `launch.json` fornito; inizia verificando come il Firefox VS Code debugger gestisce le modifiche al codice sorgente ricaricate a caldo. Il lavoro è completato quando i breakpoint rimangono attivi e l'esecuzione si interrompe sulle righe corrette dopo l'aggiunta o la rimozione di codice senza riavviare il server di sviluppo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react, typescript, vscode
Ambito
developer-experience, devtools, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.