How to Debug Code in Chrome Browser from Visual Studio Code

Debugging code can be a tedious and time-consuming task, especially when you are working with a large codebase. However, by using the built-in debugging features in Visual Studio Code, you can easily debug your code in the Chrome browser and make your development process more efficient.

In this tutorial, we will be discussing how to debug code in Chrome browser from Visual Studio Code.

How to Debug VS Code in Chrome Browser using Extention?

Step 1: Install the Debugger for Chrome Extension
Step 2: Create a new Launch Configuration
Step 3: Add Breakpoints
Step 4: Start Debugging
Step 5: Inspect Variables
Step 6: Step Over, Step In, and Step Out

Prerequisites

Before we begin, make sure you have the following installed:

Visual Studio Code
Google Chrome browser
Node.js

Step 1: Install the Debugger for Chrome Extension

To debug code in Chrome browser from Visual Studio Code, you need to install the Debugger for Chrome extension. You can do this by opening the Extensions pane in Visual Studio Code and searching for “Debugger for Chrome” or by visiting the following link:

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Step 2: Create a new Launch Configuration

To create a new Launch Configuration, open the Debug pane in Visual Studio Code and click on the “Add Configuration” button. This will open a new launch.json file in the editor.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

This is a basic launch configuration that tells Visual Studio Code to use the Chrome browser to launch the “http://localhost:3000” URL.

Step 3: Add Breakpoints

To add breakpoints to your code, simply click on the left gutter area of the editor next to the line number where you want to add a breakpoint.

Step 4: Start Debugging

To start debugging, press the F5 button or click on the green “Start Debugging” button in the Debug pane. This will launch the Chrome browser and open the URL specified in the launch configuration.

Step 5: Inspect Variables

When the code execution reaches a breakpoint, the debug session will pause, and the debugger will automatically switch to the Chrome browser. You can then inspect the state of your variables by opening the “Scope” pane in the Debug pane of Visual Studio Code.

Step 6: Step Over, Step In, and Step Out

To step over the next line of code, press the F10 button. To step into a function, press the F11 button. To step out of a function, press the Shift + F11 button.

Other uses

You can also debug your JavaScript code in other browsers like Firefox or Edge. You just need to install the corresponding extension and configure the launch.json file accordingly.

You can also debug your code in the context of an extension. You just need to configure the launch.json file accordingly and use the “Extension” type.

Category: Resolved