How to Debug JavaScript Web App in Visual Studio Code

How to Debug JavaScript Web App in Visual Studio Code
August 04, 2021

If you are debugging your JavaScript course in Google Chrome or Microsoft Edge Developer tools, it's time to say goodbye to them. Now you can develop JavaScript in Visual Studio Code easily.

To debug any project in Google Chrome or Microsoft Edge browser just press F5 or click on the left side debug navigation icon then click on Run Button at the top from your main project file.

Then put a breakpoint (a breakpoint is an intentional stopping or pausing place in a program, put in place for debugging purposes) on lines of code that you want to debug by double-clicking on the line number you will see their red dot.

Call API or Run your application when the breakpoint code line is executed our program stops running and shows us local variable values, closures, Global variable values on the left side panel.

At bottom of the sidebar, you can see Watch, Callstack, Loaded Scripts, and breakpoints.

If you are using Microsoft edge it provides an extra feature that you would like, that is you can inspect and see the code of your website in visual studio code.

Many developers use just console logs, If they would use Visual Studio Code Debugger it will save a lot of time and energy.


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates