VScode debug React config
1. 安装 VScode 插件 Debugger for Chrome
![](https://img2020.cnblogs.com/blog/1141466/202006/1141466-20200601233159459-100497581.png)
2. 配置 webpack
webpack.config.js 添加 source map
+ devtool: 'eval-cheap-module-source-map', // 或者 'eval-source-map'
3. 配置 .vscode/launch.json
按 F5 选择 chrome,会生成 .vscode/launch.json 修改如下
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*"
}
}
]
}
然后就可以 按 F5 调试项目了。