# Debugging in VSCode

To start debugging, you must complete 3 steps sequence:

1. [Install VSCode extension](/developing-with-scandi/developer-tools/debugging-in-chrome.md#1-install-a-vscode-extension)
2. [Configure VSCode debugger](/developing-with-scandi/developer-tools/debugging-in-chrome.md#2-configure-vscode-debugger)
3. [Launch the debugger](/developing-with-scandi/developer-tools/debugging-in-chrome.md#3-launch-the-debugger)

## 1. Install a VSCode extension

Install following extensions for VSCode:

{% tabs %}
{% tab title="Firefox" %}
Install "[Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)" extension.
{% endtab %}

{% tab title="Chrome" %}
Install "[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)" extension.
{% endtab %}
{% endtabs %}

## 2. Configure VSCode debugger

{% tabs %}
{% tab title="Firefox" %}
Open a file you wish to debug in Visual Studio Code. In the side panel, open the ***Run*** tab. Click ***create a launch.json file***, then select the ***Firefox*** option. Configure the generated file as follows:

```javascript
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "firefox",
            "reAttach": true,
            "name": "Launch Firefox against localhost",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
```

{% endtab %}

{% tab title="Chrome" %}
Open a file you wish to debug in Visual Studio Code. In the side panel, open the ***Run*** tab. Click ***create a launch.json file***, then select the ***Chrome*** option. Configure the generated file as follows:

```javascript
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
```

{% endtab %}
{% endtabs %}

Set `url` to the URL of your app, most likely <http://localhost:3000/>. Other settings can remain the same.

## 3. Launch the debugger

Click "Launch Chrome against localhost" in the "Run" tab. You should now be able to pause at breakpoints and view the console output.

## Troubleshooting

{% hint style="danger" %}
\[debugger for chrome] Error processing "launch": Can't find Chrome
{% endhint %}

This can occur if the debugger expects a different executable than the one you have installed. For example, you might have `google-chrome-stable` or Chromium installed instead of the more common Chrome.

In this case, you can specify which executable the extension should use by setting `runtimeExecutable` in the JSON config.

```
{
    "configurations": [
        {
            // [...]
            "runtimeExecutable": "/snap/bin/chromium"
        }
    ]
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scandipwa.com/developing-with-scandi/developer-tools/debugging-in-chrome.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.