I try to debug a react application using VSCode's debugging "capabilities", so far with a quick web search I found many resources claiming on how to do that using VSCode's debugger for Crome such as:
But I cannot find a way to do that with firefox. So far I installed "Debugger for firefox" on the VSCode and I put the following debugging options:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug app",
"type": "firefox",
"request": "attach"
}
]
}
And I run as per documentation states:
firefox -start-debugger-server -no-remote
And I try to intitialize the debug process over the VSCode, when I do that I get the error:
connect ECONNREFUSED 127.0.0.1:6000
Tha thew error can be confirmed over my GNU/Linux machine running the following command
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 -
So I am asking on how can I use the VSCode's debugging capabilities on a React app created with react-create-app
and running via npm start
commands using firefox?
For some reason over the currently running firefox instance I get the error:
[Parent 13358, Gecko_IOThread] WARNING: pipe error (173): Η σύνδεση έκλεισε από το ταίρι: file /build/firefox-JSAO4L/firefox-57.0.3+build1/ipc/chromium/src/chrome/common/ipc_channel_posix.cc, line 353
Do you haqve any idea why firefgox closes the debugger?
vscode folder in your project which includes a configuration to launch the website. Ensure that your development server is running ( npm start ). Then press F5 or the green arrow to launch the debugger and open a new browser instance.
To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting “Run and debug”. Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command.
The mentioned plugin has the following github prepository: https://github.com/hbenl/vscode-firefox-debug
Also if you look over the documentation better it states to do apply the following configuration over firefox in order to enable the debugging:
The changes above can get applied via typing about:config
to your browser's address bar.
Afterwards in order to debug just use the configuration on vscode:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug app",
"type": "firefox",
"request": "attach"
}
]
}
Now each time you want to debug an application just run over the terminal:
firefox -start-debugger-server -no-remote
Select over the VSCode the "Debug" option and select the options as the image shows:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With