How to debug react app in VSCode

[maxime-aubry]

Hello.

I would like to debug my react app into VSCode and Chrome.
Everything i tried has failed.

Here is my command line into package.json :

"scripts": {
"start": "env-cmd -f .env.a-env react-app-rewired start",
},

Could you help me please ?
Thanks.

[fvrrrn]

@maxime-aubry

1. Go to the Run and Debug view (4-th icon with bug and play button)
2. Select the create a launch.json file link to create a launch.json debugger configuration file
3. Choose Web App (Chrome) from the Select debugger dropdown list

This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.
Your launch.json should look like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

I see you are using env-cmd package which sets environmental variables such as PORT, the one is located in your launch.json file at "url" option — 8080. Your launch.json's url's port must be the same as the port your app is running at because a Chrome instance is attached to an already running app.

1. If .env.a-env contains PORT definition then copy its value and replace 8080 with it in launch.json file.
2. If .env.a-env does not contain PORT definition then replace 8080 with 3000 (which is the default port CRA apps running at) in launch.json file.

Now you only have to run your app. Follow these steps:

1. Execute npm run start or yarn start.
2. Wait for the app to compile. You will see this output in your terminal shell (hence the port number):

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000

3. Press F5 or go to the Run and Debug view and then press green play button that says "Launch Chrome against localhost".

[AmirAghajani98]

hi to fix this issue try it in package.json:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

or Replace the content of the generated launch.json file with the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000", // Ensure this matches your app's URL
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

I hope it is useful.

[camillalo]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。