React debug Using VSCode and Firefox instead of Chrome

Question

J'essaie de déboguer une application de réaction en utilisant les "capacités" de débogage de VSCode, jusqu'à présent, avec une recherche rapide sur le Web, j'ai trouvé de nombreuses ressources affirmant comment faire cela en utilisant le débogueur de VSCode pour Crome, telles que:

Mais je ne peux pas trouver un moyen de le faire avec Firefox. Jusqu'à présent, j'ai installé "Debugger for firefox" sur le VSCode et j'ai mis les options de débogage suivantes:

{ "version": "0.2.0", "configurations": [ { "name": "Debug app", "type": "firefox", "request": "attach" } ] }

Et je cours selon la documentation:

firefox -start-debugger-server -no-remote

Et j'essaie d'initialiser le processus de débogage sur le VSCode, quand je fais cela, j'obtiens l'erreur:

connect ECONNREFUSED 127.0.0.1:6000

Cette erreur peut être confirmée sur ma machine GNU/Linux exécutant la commande suivante

netstat -ntlp (Not all processes could be identified, non-owned process info will not be shown, you would have to be root to see it all.) Active Internet connections (only servers) Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 127.0.0.1:37893 0.0.0.0:* LISTEN 9368/node tcp 0 0 0.0.0.0:27017 0.0.0.0:* LISTEN - tcp 0 0 0.0.0.0:139 0.0.0.0:* LISTEN - tcp 0 0 127.0.0.1:6379 0.0.0.0:* LISTEN - tcp 0 0 127.0.0.1:9333 0.0.0.0:* LISTEN 10924/code tcp 0 0 127.0.1.1:53 0.0.0.0:* LISTEN - tcp 0 0 10.42.0.1:53 0.0.0.0:* LISTEN - tcp 0 0 127.0.0.1:631 0.0.0.0:* LISTEN - tcp 0 0 0.0.0.0:3000 0.0.0.0:* LISTEN 6732/node tcp 0 0 127.0.0.1:3001 0.0.0.0:* LISTEN 6784/mongod tcp 0 0 0.0.0.0:3002 0.0.0.0:* LISTEN 11168/node tcp 0 0 0.0.0.0:445 0.0.0.0:* LISTEN - tcp 0 0 0.0.0.0:20256 0.0.0.0:* LISTEN 9368/node tcp6 0 0 :::9090 :::* LISTEN 11340/node tcp6 0 0 :::139 :::* LISTEN - tcp6 0 0 ::1:631 :::* LISTEN - tcp6 0 0 :::445 :::* LISTEN -

Je demande donc comment utiliser les capacités de débogage du VSCode sur une application React créée avec react-create-app et en cours d'exécution via npm start commandes utilisant firefox?

Modifier 1

Pour une raison quelconque, sur l'instance de Firefox en cours d'exécution, j'obtiens l'erreur:

[Parent 13358, Gecko_IOThread] AVERTISSEMENT: erreur de canalisation (173): , ligne 353

Avez-vous une idée de la raison pour laquelle firefgox ferme le débogueur?

Dimitrios Desyllas · Accepted Answer

Le plugin mentionné a le pré-dépôt github suivant: https://github.com/hbenl/vscode-firefox-debug

De plus, si vous examinez mieux la documentation, elle indique d'appliquer la configuration suivante sur Firefox afin d'activer le débogage:

Les modifications ci-dessus peuvent être appliquées en tapant about:config à la barre d'adresse de votre navigateur.

Ensuite, pour déboguer, utilisez simplement la configuration sur vscode:

{ "version": "0.2.0", "configurations": [ { "name": "Debug app", "type": "firefox", "request": "attach" } ] }

Maintenant, chaque fois que vous souhaitez déboguer une application, il suffit de l'exécuter sur le terminal:

firefox -start-debugger-server -no-remote

Sélectionnez sur le VSCode l'option "Debug" et sélectionnez les options comme le montre l'image: