Languages
[Edit]
EN

VS Code - debug Gatsby React Project from Visual Studio Code in Ubuntu with Google Chrome Browser

5 points
Created by:
Marcin
2535

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
Hey ūüĎč
Would you like to know what we do?
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.