Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React debug Using VSCode and Firefox instead of Chrome

Tags:

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:

  • https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037
  • https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f

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?

like image 438
Dimitrios Desyllas Avatar asked Jan 02 '18 11:01

Dimitrios Desyllas


People also ask

How run react app in debug mode in VS code?

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.

How do I use VS code debugger in Chrome?

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.


1 Answers

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:

Uploaded image

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:

Selecting Vscode debugger

like image 72
Dimitrios Desyllas Avatar answered Nov 02 '22 07:11

Dimitrios Desyllas