Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

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

0 contributions
5 points

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
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more