Debugging JavaScript in VS Code: A Fruitful Endeavor
Debugging is an essential skill in a developer’s toolbox, allowing you to understand better and fix issues within your code. Visual Studio Code (VS Code), with its powerful debugging capabilities, makes this process smoother and more intuitive. In this tutorial, we’ll explore how to debug a JavaScript file that contains an array of fruits and uses a forEach loop to print each fruit. We’ll also go through setting up a debug configuration in VS Code.
Prerequisites
- Ensure you have Visual Studio Code installed.
Basic understanding of JavaScript.
Setting Up Your JavaScript File
Let’s start by creating a simple JavaScript file that we will later debug. Follow these steps:
- Create a New File: Open VS Code, and in your working directory, create a new file named
fruits.js. - Add JavaScript Code: Paste the following JavaScript code into
fruits.js:
let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
Setting Up Debug Configuration in VS Code
To debug this script in VS Code, you need to set up a debug configuration:
- Open the Debug View: Click on the Debug icon in the Activity Bar on the side of the window or use the keyboard shortcut
Ctrl+Shift+D. - Create a launch.json File: Click on the “create a launch.json file” link, then select “Node.js” from the environment options. This action creates a file named
launch.jsonin the.vscodefolder at the root of your workspace. - Adjust the Configuration: Make sure your
launch.jsonlooks something like this to run the current file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Current File",
"program": "${file}",
"skipFiles": ["<node_internals>/**"]
}
]
}
Debugging Your Code
With the configuration set, you’re ready to debug your code:
- Set a Breakpoint: Open
fruits.js, and click on the left margin next to the line number of theconsole.log(index, fruit);line to set a breakpoint. A red dot appears, indicating where the execution will pause. - Start Debugging: Press
F5or click on the green play button in the Debug View. The debugger starts and executes your code up to the breakpoint. - Inspect Variables: Once the execution is paused, you can hover over variables to see their current values. The Debug Side Bar allows you to inspect variables, see the call stack, and view/watch expressions.
- Control Execution: Use the Debug Toolbar to step over lines of code, step into functions, continue execution, or stop debugging.
