Visual Studio Code调试React代码的方法

首先，先在扩展里找到一个叫做Debugger for Chrome的插件，微软官方出品的。把它安装上

然后你需要有一个Chrome浏览器，这个就不赘述了

然后在你的项目里建一个.vscode的目录，在这个目录下建立一个launch.json的文件

然后把代码粘贴进去

这个代码在这里：

{
    "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}/*"
        }
    }],
}

然后你还像往常那样启动项目，但是自动弹出的chrome把它关掉，咱们不用那个

在这里咱们用调试菜单的“启动调试”命令

然后你就可以愉快的打断点调试了，不要再console.log了~ ^_^