React VSCode Webpack Debug

VSCode 使用者的福音。在公司原来使用WebStrom开发React，Webstrom 开发React调试详见（debugging-webpack-applications-in-webstorm），后来发现VSCode是开源免费的，于是转战VSCode。虽然大中国破解很牛逼，但是在国企上班不能用破解，你懂的。废话不多说，详见一下内容。

内容大纲

1. VSCode 调试配置
2. webpack.config.js 配置
3. 完整操作步骤
4. 常见问题

---

VSCode 调试配置
VSCode调试快捷键F5，如果默认没有配置过，F5会有提示，我们选择Chrome

2017-01-11_220056.png

选择之后会在项目目录自动生成.vscode/launch.json，以下是我的launch.json文件，特别注意图中提示

2017-01-11_220307.png

webpack.config.js 配置
webpack.config的配置最主要注意两个东西，详见下图

2017-01-11_220745.png

完整操作步骤

• 第一步启动Webpack调试项目：
  webpack-dev-server --config webpack.config.dev.js
• 第二步在VSCode中按F5开启调试

常见问题

• 127.0.0.1:9222 连接失败，如下图：

  
  
  

  zL4P2.png
  
  

  处理办法：关闭所有的Chrome浏览器，重新在VSCode中F5调试即可，因为已经打开的Chrome有可能会阻止调试或者占用调试端口（默认9222）