> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/developing-with-scandi/developer-tools/debugging-in-chrome.md).

# 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"
        }
    ]
}
```