How to Debug JavaScript in Visual Studio Code

Edited 3 weeks ago by ExtremeHow Editorial Team

Visual Studio CodeDebuggingJavaScriptExtensionsConfigurationToolsBreakpointsConsoleIntegrationSetupSource CodeDevelopmentWeb DevelopmentTroubleshootingErrorsProgrammingNode.jsWorkflowEfficiencyTesting

Debugging is an essential part of the software development process. Visual Studio Code, also known as VS Code, provides strong support for JavaScript debugging. Its debugging tool provides developers with a number of features that make it easier to identify and fix bugs in their code. In this document, we will explain in very simple language how you can effectively debug JavaScript using Visual Studio Code. We will discuss setup, breakpoints, stepping through code, and how to view variables. We will provide examples to make it easier for you to get started.

Setting up your environment

First, make sure you have Visual Studio Code installed on your machine. You can download it from the official Visual Studio Code website. Once installed, make sure you have the latest Node.js runtime environment installed as it is required to run JavaScript outside the browser. You can download Node.js from its official website.

Installing the required extensions

Visual Studio Code relies heavily on extensions for additional functionality. To effectively debug JavaScript, consider installing the following extensions:

• Debugger for Chrome: This extension allows you to debug client-side JavaScript running in Google Chrome.
• Node.js Extension Pack: This bundle of extensions is useful if you're working with Node.js applications.

To install these extensions, open VS Code, click the extension icon on the activity bar on the side of the window, and search for each extension by name.

Starting a debugging session

Once your environment is set up, you can start a debugging session. Follow these steps:

1. Open your JavaScript file: In VS Code, open the folder that contains your JavaScript project and locate the file you want to debug.
2. Set a breakpoint: A breakpoint is a marker that tells the debugger to stop the execution of your code at a specific point. To set a breakpoint, click the left margin in the editor next to the line number where your JavaScript code is located. A red dot will appear to indicate that the breakpoint is set.
3. Start debugging: Click the Debug icon in the Activity bar on the side of the window. Click the green Play button (or press F5) to start a debugging session. If you're asked to select an environment, choose "Node.js" or "Chrome", depending on where you want your code to run.

Using breakpoints

Breakpoints are powerful tools in debugging that allow you to pause the execution of your code in order to inspect its state. By inspecting variables and their values, you can gain information about how your code is working.

To manage breakpoints:

• Disable/Enable Breakpoints: Disable or enable an existing breakpoint by right-clicking on it. Disabling a breakpoint means the debugger will ignore it during execution.
• Delete a breakpoint: Click the red dot in the editor to delete a breakpoint.
• Conditional breakpoint: Right-click on the breakpoint and select "Add conditional breakpoint". This allows code execution to stop only when the specified condition is met.

Stepping forward through the code

Once a breakpoint is hit, you have several options available to proceed further in your code:

• Continue >| : It continues the execution until the next breakpoint is encountered.
• Step Over >| : This advances to the next line in the current function, without stepping into the functions or methods found in that line.
• >> STEP INTO: This takes you through the functions or methods used on the line and stops at the first possible point within that function.
• Step out |< : If you have entered a function and want to complete it and return to the main calling function, then use this option to exit the current function.

Inspecting variables

During a debugging session, you often need to inspect the values of variables to determine whether they contain the expected data. Visual Studio Code provides various ways to inspect variables:

• Variables panel: While debugging, look at the Variables panel in the Debug section. It shows all the variables currently in scope along with their values.
• Watch Window: Add variables to the Watch Window so that their values can be continuously monitored. To add a variable, right-click on it in the editor and select "Add to Watch".
• Hover: Hover over a variable in your code to see its current value.

Console and Debug Console

The Debug Console in Visual Studio Code acts as an interactive console, allowing you to execute arbitrary code and evaluate expressions. This can be especially helpful for making quick changes or checking hypotheses about code behavior in real time.

The standard console is still available for your regular use through programming, usually integrated with console.log() statements in JavaScript. This is another simple, but effective way to track changes to data throughout your execution.

Example

Let us consider a simple program to understand the debugging process:

function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('Result of addition: ', result1); const result2 = subtract(10, 5); console.log('Result of subtraction: ', result2);

To debug this JavaScript program:

• Open the file in Visual Studio Code.
• Set breakpoints in add() and subtract() functions.
• Start debugging using the VS Code debugger by pressing F5.
• As the code execution reaches your breakpoint, inspect the values of a and b.

Conclusion

Learning how to debug in Visual Studio Code may seem scary at first, but with practice, it becomes a very rewarding experience. Identifying errors in code, stepping through logic, and validating assumptions about how your code should work all become second nature. Equipped with this powerful tool, your efficiency and effectiveness as a developer will greatly improve. Remember to use breakpoints regularly, inspect variables, and make good use of the debug console to test code logic on-the-fly.

Debugging is a fundamental activity, and having strong skills in using robust tools like Visual Studio Code improves your ability to deliver high-quality code even more. Happy debugging!

  Share This Article

If you find anything wrong with the article content, you can request an update