<aside> ✅ This guide only works for Visual Studio Code

</aside>

To start debugging, you must complete 3 steps sequence:

1. Install VSCode extension
2. Configure VSCode debugger
3. Launch the debugger

1. Install a VSCode extension

Install the following extensions for VSCode:

Firefox Install "Debugger for Firefox" extension.

Chrome Install "Debugger for Chrome" extension.

our collection is shared with everyone on your team.

2. Configure VSCode debugger

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:

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

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:

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

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

What is the setup in magento theme mode?

In the Magento mode, you can use this launch file:

• .vscode/*launch.json*

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

<aside> 🚨 [debugger for chrome] Error processing "launch": Can't find Chrome

</aside>

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

academy of digital industries