React debug Using VSCode and Firefox instead of Chrome

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?

Edit 1

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?

Upvotes: 31

Answers (3)

devklick

Reputation: 2638

I use the Debugger for Firefox VSCode extension and use the following launch configuration:

{
    "name": "Launch Firefox",
    "type": "firefox",
    "request": "launch",
    "reAttach": true,
    "url": "http://localhost:3005",
    "webRoot": "${workspaceFolder}"
},

Start your application on the port specified in your launch config (note that the syntax for doing this may vary depending on your OS)

PORT=3005 npm start

Finally, select the debugger from the drop-down list in VSCode and hit f5 to launch it (or press the play button).

Upvotes: 2

Eduard Askadullin

Reputation: 11

In my case it helped increasing the timeout to 30000 (otherwise Firefox simply does not have not enough time to start... ):

   "configurations": [
        {
            .............., 
            "timeout": 30000
        },

Upvotes: 1

Dimitrios Desyllas

Reputation: 10068

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:

Upvotes: 25

React debug Using VSCode and Firefox instead of Chrome

Edit 1

Answers (3)

Related Questions