firefox-devtools / firefox-devtools/vscode-firefox-debug
Debugging react app with hot-reloading does not work
- 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