GabrielBB GabrielBB - 1 month ago 9
React JSX Question

Visual Studio Code is not npm start-ing my React JS app when debugging

I want to debug a React JS app on Visual Studio Code so i'm following this tutorial: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

I'm stuck at:


Ensure that your development server is running ("npm start"). Then
press F5 or the green arrow to launch the debugger and open a new
browser instance.


A new Chrome instance is being opened requesting "http://localhost:3000" but my app is not really running, it seems it just ran the debugger.

If i mannually
npm start
my app it runs. So i guess that
launch.json
is missing something for Visual Studio Code to start the app with the debugger. That's why i'm stuck at ensuring that my development server is running the command, because i don't know where exactly i check this

This is my launch.json:

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}


And this is my package.json:

{
"name": "tic-tac-toe",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Answer Source

I'm not sure if that's even possible. The tutorial clearly says you should ensure that the development server already runs. So, you'll have to first run npm startand debug afterwards.