NodeJS & VSCode Debugging

Figuring out what is going on when you get an error can be a pain with React and to a lesser degree Nodejs in general, but most definately with React/Redux...etc.. So in this short post I wanted to detail what I did.

Firefox

Ok so first things first, lets setup firefox. You can leave firefox running if it already is running. Go to your terminal and enter this.

1

firefox -start-debugger-server

At this point go to your open firefox browser, or if you don't have one open, just open one and go to the url about:config and then search for these values.

1
2
3

devtools.debugger.remote-enabled #set this to true
devtools.chrome.enabled #set this to true
devtools.debugger.prompt-connection #set this to false

VSCode

Now it comes to VSCode. You need to install an extension so go to the store and type, debugger for firefox, it should be at the top of the list. Now install that. After it is installed go to the debug lens in the left bar of vscode. At this point you want to Add Configuration, it is easy to find, either go to the drop down in the top, or click the button located in the bottom right of the code window. At this point you want to select Firefox : Attach. Now that is it.

Optional

Optionally you can also setup node to automatically connect to the debug session for your server, or other code you may have. Click the VSCode gear icon in the bottom left and select the Settings option. Now enter this text.

1

node debugging

Below you should see Auto attach options and also when to start debugging such as at the start, or other options. You can tweak these to your liking, but just to let you know they exist.

Test

In order to test this we have to start debugging, but first set a few break points. Go to the debugging lens and then start the Attach option. Unless you changed the name of the option of course, which you can do by the way.

Firefox

Now go back to firefox and refresh your react app. It should trigger on your break points!

Congrats! Enjoy your debugging!