VSCode 使用者的福音。在公司原來使用WebStrom開發React，Webstrom 開發React調試詳見（debugging-webpack-applications-in-webstorm），后來發現VSCode是開源免費的，于是轉戰VSCode。雖然大中國破解很牛逼，但是在國企上班不能用破解，你懂的。廢話不多說，詳見一下內容。
內容大綱
- VSCode 調試配置
- webpack.config.js 配置
- 完整操作步驟
- 常見問題
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）
