Languages
[Edit]
EN

VS Code - debug Gatsby React project in IDE on Ubuntu

5 points
Created by:
Marcin
19340

In this article we want to show how to configure and debug React javascript, typescript, jsx or tsx application with Visual Studio Code, connected to Google Chrome Browser under Ubuntu Linux.

Note: official instruction can be found here.

Do following steps:

  1. run Visual Studio Code,
  2. install Debugger for Chrome plugin,
    in VS Code press ctrl+p, paste ext install msjsdiag.debugger-for-chrome and press Enter key,
    or open this link and click Install button,
  3. open Run tab in left aside menu (or press ctrl+shift+d),
  4. edit existing launch.json file (click gear icon)
    or click create a launch.json file selecting Chrome and paste following code:
    {
        // More information on: https://go.microsoft.com/fwlink/?linkid=830387
    
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost - Ubuntu",
                "url": "http://localhost:8000",
                "webRoot": "${workspaceFolder}",
                "runtimeExecutable": "/usr/bin/chromium-browser"
            }
        ]
    }

    Where: "runtimeExecutable": "/usr/bin/chromium-browser" indicates browser executable file (use whereis chromium-browser command to find proper path), 

  5. run development server in project directory with yarn develop --host=0.0.0.0 command - wait until bundle will be built,
  6. in  Run tab select yours configuration as active if needed (ComboBox on top) and click Start Debugging button (green triangle) - browser will run,
  7. add breakpoint in VS Code and check if it is working.
Gatsby React debugging from VS Code in Ubuntu with Google Chrome Browser
Gatsby React debugging from VS Code in Ubuntu with Google Chrome Browser

See also

  1. VS Code - debug with npm run
  2. VS Code - debug js file with Node.js

Visual Studio Code

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join