如何在Visual Studio Code中调试Webpack构建的React应用

嘿，作为React新手能一步步走到这已经超棒啦！我来帮你把剩下的调试流程补全，让你顺利搞定VS Code调试React应用～

你提供的launch.json内容没写完，我给你补全并解释关键配置项，这样调试才能正常工作：

{
  // 使用IntelliSense了解可用属性。
  // 悬停查看现有属性的描述。
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000", // 这里要和React应用启动的端口一致，Create React App默认是3000
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true, // 开启这个才能让断点映射到你的原始源码，不然断点会失效
      "userDataDir": "${workspaceFolder}/.vscode/chrome-user-data" // 避免和本地Chrome的用户数据冲突
    }
  ]
}

几个核心点要注意：

• url：必须和你启动React应用的地址完全匹配，比如你用npm start启动，默认就是http://localhost:3000，如果改了启动端口，这里也要对应修改。
• webRoot：指定你的源码根目录，这样VS Code才能精准找到你要调试的文件。
• sourceMaps：这个是重中之重！React默认会生成source map文件，开启它才能让断点定位到你的JSX/TSX源码，而不是编译后混淆的代码。

• 先启动你的React应用：在VS Code的终端里运行npm start（如果你是用Create React App创建的项目），等浏览器能正常打开你的应用之后，再进行调试操作。
• 设置断点：打开你的React源码文件（比如App.js或者某个组件文件），点击行号左侧的空白区域，会出现一个红色的小圆点，这就是断点，调试时程序运行到这里会自动暂停。

• 点击VS Code左侧活动栏的「运行和调试」图标（就是那个类似播放键的图标），然后在顶部的调试配置下拉菜单里选择你刚才配置的Launch Chrome against localhost。
• 点击绿色的启动按钮，Chrome会自动打开并加载你的应用，当触发到你设置的断点时，VS Code就会暂停程序，你可以在调试面板里查看变量值、调用栈，还能一步步执行代码，排查问题超方便！

• 如果断点变成灰色（显示「未绑定断点」）：检查webRoot路径是否正确，确认sourceMaps已经设为true，并且一定要等应用完全启动后再启动调试。
• 如果Chrome打不开或者显示无法访问：确认url里的端口和你应用实际运行的端口一致，比如你用PORT=3001 npm start启动应用，就要把url改成http://localhost:3001。

内容的提问来源于stack exchange，提问作者Hieu Lam