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)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容