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了~ ^_^