Visual Studio Code code debugging method React

First, let's find one called Debugger for Chrome plug-in extensions, Microsoft officially produced. Install it on

Then you need to have a Chrome browser, this will not go

Then build a .vscode directory in your project, build a launch.json files in this directory

And then paste the code into

The code here:

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000",
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}",
        "skipFiles": [
            "node_modules/**"
        ],
        "sourceMapPathOverrides": {
            "webpack:///*": "${webRoot}/*"
        }
    }],
}

Then you start the program as usual, but the automatic pop-up chrome turn it off, we do not have that

Here we use the "Start Debug" menu command Debug

Then you can debug a pleasant break point, do not console.log the ~ ^ _ ^