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

Flaky Remote Debugging under WSL2 with Parcel/React project, with ECONNREFUSED to 127.0.0.1

Abierto
#238 4 comentarios 1 reacción 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
447
Forks
76
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

I am trying to make the switch to WSL (the newer version, WSL2) on Windows 10 since the build speeds are much faster, but being able to debug is the missing link.

I have created a barebones test project to try to run down why my breakpoints aren't working in WSL. I'm using Parcel for a bundler, VSCode with version 2.9.1 of `vscode-firefox-debug`

After an hour running it down I think it's likely that it is something about the way "localhost" works in WSL.

Debugging works fine for me when running this project on Windows10 outside WSL. When running under WSL2 I'm able to see logging output from Firefox but the breakpoints often don't work.

In the course of writing this issue, the WSL remote debugging mysteriously started working with no rhyme or reason, no change on my part, so I have included logs below from both a non-working and working run under WSL.

When running outside WSL, I can see even from the console.log's that the source maps are working correctly, because it prints "main.tsx:19" next to the console print statement

When running under WSL2, Firefox itself (inside the firefox console window) is printing Main.tsx next to the console statement, but in VSCode I see the bundle name instead (main.186cb047.js). So the fact that the breakpoints aren't working is indeed a source-map issue, but Firefox is able to use the sourcemaps fine, so it's more of an issue of VSCode getting the source maps.

In cases where it fails to work, the Diagostic output from vscode-firefox-debug prints far less lines. In cases where it's working properly, the output will contain the line

```
DEBUG|006.049|PathConversion: Converted url http://localhost:1234/main.tsx to path D:\mike\dev\simple-react-test\main.tsx
```

whereas in cases where it's not working, it never prints any line about main.tsx, but only about the bundles:

```
DEBUG|006.259|PathConversion: Converted url http://localhost:1234/main.186cb047.js.map to path vscode-remote://wsl%2Bubuntu/home/mike/simple-react-test/main.186cb047.js.map
ERROR|008.273|net: HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:1234
DEBUG|008.274|PathConversion: Converted url http://localhost:1234/main.186cb047.js to path vscode-remote://wsl%2Bubuntu/home/mike/simple-react-test/main.186cb047.js
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
```

As mentioned, debugging mysteriously started working under WSL during these experiments at which point the WSL console output looked like the windows output.

So the question is, why under WSL does it sometimes not try to do the PathConversion for main.tsx?

Maybe the `ECONNREFUSED` in the logs above is the answer? I'm running parcel's server on localhost:1234. When running outside WSL, 127.0.0.1 is equivalent to localhost, but under WSL2, if parcel is serving on localhost:1234 and I try to browse to 127.0.0.1:1234 I get "unable to connect".

So perhaps the crux of this bug is that there's an assumption somewhere that 127.0.0.1 is equivalent to localhost, which is untrue in this environment. I don't know where that assumption is being made though.

My other thought is that maybe the last lines of these logs are a hint :

```
ERROR|007.998|EnvironmentAdapter: Unexpected function grip in function environment: {"displayName":"parcelRequire<[\"main.tsx\"]<"}
ERROR|007.999|EnvironmentAdapter: Unexpected function grip in function environment: {"displayName":"parcelRequire<[\"main.tsx\"]

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza reproduciendo el problema con el barebones React project, Parcel en localhost:1234, WSL2 y vscode-firefox-debug, comparando los registros de diagnóstico que funcionan y los que fallan. Inspecciona la conversión de la ruta del source map de main.tsx y la solicitud ECONNREFUSED para determinar por qué difiere el source mapping; terminado significa breakpoints fiables y rutas de main.tsx en WSL2 sin el fallo de conexión.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
linux, react, typescript, vscode
Área
developer-experience, devtools, operating-systems
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.