Debugging Frontend JavaScript and Nodejs in VSCode and Chrome

Unless you write flawless code, debugging is one of the most important skills you need to get your code to work. As you code, you’ll constantly mutter to yourself, “Why doesn’t this work???” The first step toward answering your own question is using the debugger. Whether you’re writing a new app from scratch or finding bugs in an existing app, debugging gives you insight into what the computer sees. When we’re newbies/lazy, we use console.log() to figure out what’s wrong. However, console.log() is rather limited (only prints out the specific information you’re looking for) and is cumbersome because you have to type out each variable you want to see. Instead of inserting console.log() each time you want to print a variable, you can insert “debugger” and see values of ALL variables and functions on the call stack.

To debug, you need to be able to run your application in the browser because the debugger will be running through Chrome.

1. Set up your application so that it can run in the browser (localhost:yourPort). In step 4, you will tell vscode which port your app is running on.
2. Insert the keyword “debugger” into the location(s) where you want to debug. The debugger will stop JavaScript execution at this spot, at which point, you can inspect the values of your variables and the call stack.
3. run => Start Debugging
4. .vscode/launch.json ==> “url”: “http://localhost:yourPort”
5. run => Start Debugging
6. Your app will load in Chrome. Developer tools => Sources => The sources tab shows which JavaScript files have loaded. If your JavaScript file is not listed there, you will need to navigate to a location in your app (in the browser) that will activate/load your JavaScript file (only you know where this would be).
7. In vscode, click on the debugger icon. Now, you can look at the call stack and local/global variables

8. Press the play button to move to the next debugger breakpoint

Debugging Node

1. Insert the keyword “debugger” into the location(s) where you want to debug.
2. Run => Add Configurations

3. Run => Start Debugging (F5)

4. Select your node app from the drop down that appears.

5. Refresh app in browser to ensure that your javascript is rerun up to the point that you want to debug.

6. You can now view the variables and call stack.

7. To move to the next “debugger,” press the play button.