Visual Studio Code is a popular code editor that offers many features and extensions for web development. One of the most useful features is the built-in debugger, which allows you to easily find and fix errors in your JavaScript code. In this article, I will show you how to use the debugger in VS Code and share some tips and tricks to make your debugging experience more efficient and enjoyable.
Prerequisites
To follow along with this article, you will need the following:
- Visual Studio Code installed on your machine. You can download it from here.
- A JavaScript project or file that you want to debug. For this article, I will use a simple Node.js application that prints “Hello, world!” to the console. You can create one by following the steps here.
- The Debugger for Chrome extension installed in VS Code. You can install it from the Extensions view (Ctrl+Shift+X) or from here. This extension enables you to debug your JavaScript code running in Google Chrome.
Setting up the debugger
To start debugging your JavaScript code in VS Code, you need to create a launch configuration file that tells VS Code how to launch and debug your program. A launch configuration file is a JSON file that contains a list of configurations for different debugging scenarios. VS Code stores the launch configuration file in a .vscode folder in your workspace or project folder.
To create a launch configuration file, follow these steps:
- Open your JavaScript project or file in VS Code.
- Go to the Run and Debug view by clicking on the Run icon in the Activity Bar or pressing Ctrl+Shift+D.
- Click on the create a launch.json file link in the Run and Debug view. VS Code will try to automatically detect your debug environment and generate a launch configuration file for you. If VS Code cannot detect your debug environment, you will have to choose it manually from a list of options.
- For this article, we will choose Node.js as our debug environment. VS Code will create a launch.json file with a default configuration for Node.js debugging. The launch.json file should look something like this: JSON.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\app.js"
}
]
}
The launch.json file contains a list of configurations, each with a set of properties that define how to launch and debug your program. The most important properties are:
- type: The type of the debugger to use. For Node.js debugging, the type is node.
- request: The request type. There are two types of requests: launch and attach. A launch request means that VS Code will start and debug your program. An attach request means that VS Code will attach to an already running program and debug it.
- name: The name of the configuration. You can use any name you want, but it should be descriptive and meaningful.
- program: The path to the main file of your program. For Node.js debugging, this is usually the entry point of your application. You can use variables such as ${workspaceFolder} to refer to the root folder of your workspace or project.
You can modify the launch configuration file to suit your needs. For example, you can add more configurations for different scenarios, such as debugging in Chrome or using a different port. You can also change the values of the existing properties or add new ones. For a complete list of properties and their descriptions, see here.
Running and debugging your program
Once you have created and saved your launch configuration file, you are ready to run and debug your program. To do so, follow these steps:
- Select the configuration that you want to use from the dropdown menu in the Run and Debug view. For this article, we will use the default configuration named “Launch Program”.
- Click on the green play button or press F5 to start debugging. VS Code will launch your program and open the Debug Console, where you can see the output of your program and interact with it using commands.
- To stop debugging, click on the red stop button or press Shift+F5.
While your program is running, you can use the following features and tools in VS Code to debug your code:
- Breakpoints: Breakpoints are markers that you can set in your code to pause the execution and inspect the state of your program. To set a breakpoint, click on the left margin of the editor or press F9. You can also set conditional breakpoints, log points, or inline breakpoints. To manage your breakpoints, you can use the Breakpoints view in the Run and Debug view.
- Call Stack: The Call Stack view shows the sequence of functions that have been called to reach the current line of code. You can use the Call Stack view to navigate through the stack frames and see the local variables and arguments of each function.
- Variables: The Variables view shows the variables and their values that are available in the current scope and the outer scopes. You can use the Variables view to inspect and modify the values of your variables.
- Watch: The Watch view shows the values of any expressions that you want to monitor. You can use the Watch view to evaluate and edit expressions in the context of the current stack frame.
- Debug Console: The Debug Console shows the output of your program and allows you to execute commands in the context of the current stack frame. You can use the Debug Console to print messages, values, and errors using the console API or the repl command.
- Debug Toolbar: The Debug Toolbar contains buttons that let you control the execution of your program. You can use the Debug Toolbar to resume, pause, step over, step into, step out, restart, or stop your program.
Tips and tricks
Here are some tips and tricks that can help you improve your debugging experience in VS Code:
- Use the JavaScript Debug Terminal: The JavaScript Debug Terminal is a special terminal that automatically attaches the debugger to any Node.js process that you launch from it. You can use the JavaScript Debug Terminal to run and debug Node.js scripts or commands without creating a launch configuration file. To open the JavaScript Debug Terminal, go to the Terminal menu and select New JavaScript Debug Terminal.
- Use the Debug: Toggle Auto Attach command: The Debug: Toggle Auto Attach command lets you automatically attach the debugger to any Node.js process that you launch from the integrated terminal or the external terminal. You can use the Debug: Toggle Auto Attach command to run and debug Node.js scripts or commands without creating a launch configuration file or using the JavaScript Debug Terminal. To use the Debug: Toggle Auto Attach command, press Ctrl+Shift+P and select Debug: Toggle Auto Attach. You can choose from three options: disabled, only with flag, or always.
- Use the Debug: Open Link command: The Debug: Open Link command lets you open a URL in your browser and automatically attach the debugger to the corresponding JavaScript code running in the browser. You can use the Debug: Open Link command to debug web applications or websites without creating a launch configuration file or using the Debugger for Chrome extension. To use the Debug: Open Link command, press Ctrl+Shift+P and select Debug: Open Link. Then, enter the URL that you want to open and debug.
- Use the Debug Visualizer extension: The Debug Visualizer extension is a VS Code extension that lets you visualize data structures and algorithms while debugging. You can use the Debug Visualizer extension to see graphical representations of your variables, expressions, or custom data. To use the Debug Visualizer extension, you need to install it from the Extensions view or from here. Then, you can use the Debug: Add Visualizer command to add a visualizer to the Watch view.
Conclusion
In this article, I have shown you how to use the built-in debugger in VS Code to debug your JavaScript code. I have also shared some tips and tricks to make your debugging experience more efficient and enjoyable. I hope you have found this article helpful and learned something new. Happy debugging!
