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)