Every time I'm tracing a bug, I'm tempted to throw in a console.log() to check some variables. This can be faster when you exactly know what the issue is, but it will most likely take longer if that's not the case.
In the following post, you'll find some videos followed by an explanation. I will show how to set up debugging for Javascript in VS Code for Node.js and for React in Firefox or Chrome.
Debugging Node.js
First of all, you need to go to the debug tab on the right menu of VS Code. If you don't have anything configured yet you can create a new launch.json. Choose "Node.js" from the dropdown.
If you don't see the option to create a new file, you can open the existing launch.json by clicking on the gear icon. You can add new configurations by typing the environment (eg "node"). Then you can choose from the autocomplete.
The generated configuration will run the file, which is specified under "program" with a debugger attached. To do that choose the "Launch Program" option in the debug window and click the "play icon".
Now your node.js program should be running. You can go to any file of your program and set a breakpoint by clicking next to the line number. This works the same for express APIs, which run on some port.
Attach debugger to Port
Another way to enable debugging on servicer side apps is to attach the debugger to a port. This would enable you to use automatic reload with tools like nodemon. For that, you have to open your launch.json by clicking that little gear icon on top of the debug tab.
Then within the configuration array, you have to type "attach" and select "Node.js: Attach". This will generate code that includes a port.
Now you have to start your app with this port as the --inspect parameter.
node --inspect=9229 index.js
Your app should be running. Afterward, you should be able to attach the debugger. Go to the debugging tab, select "Attach" from the dropdown, and click the start icon.
Launch Firefox or Chrome against localhost
In this example, I'll debug a react app in Firefox and Chrome. If you want to use Firefox you'll need to go to the extensions tab in VS Code first. Install the extension for debugging Firefox. You can find ithere.
For Chrome, you don't need to install an extension as VS Code. It is included in the default debugger since version 1.46.
As the Video shows you have to create a launch.json file by going to the debug tab. Choose the browser with which you want to debug. In the Video I choose Chrome but for Firefox it should be exactly the same. If it doesn't show up in the list or you already have a launch.json file, you can instead go to the file. Then type "Firefox" or "Chrome". Now use the autocomplete to generate the corresponding configuration. For Firefox it would be Firefox: Launch (Server).
Last you have to replace the URL with the one where your app is actually running on. Afterward, you should be able to use the debugger.
Further reads:
https://code.visualstudio.com/Docs/editor/debugging
https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug