使用 Visual Studio Code 調試 webpack + react 項目

以前在vscode  配置  node express 的調試，心血來潮想在webpack + react 項目上使用 vscode 調試功能，實現瀏覽器的斷點調試，單步調試等。

運行 vscode 並打開項目，點擊左側欄  調試按鈕（ shift + ctrl + D）, 切換到debug 模式， 

 1 點擊添加配置按鈕  

2 點擊後會彈出 選擇須要DEBUG的項目 提示下拉框 選擇 chorme 

ps：若是沒有chrome 選擇，先在插件擴展處安裝

 

3 此時vscode 會自動在 .vscode 夾下新建 launch.json 文件

對 URL 配置換上 你項目對應的 端口

關鍵在於這個屬性  「sourceMapPathOverrides」 以前一直不能斷點，提示映射源找不到，我是用 webpack dev server 的，若是用其餘 server 這個根據發佈路徑配置

4 在webpack 的配置文件上 開啓 devtool: 'source-map',

這樣就能夠在vs code 上調試了，不須要打開瀏覽器的調試工具也能調試。

 PS : 成功開啓調試後在上部中間位置會出現 調試工具欄  下部的 控制檯也會輸出信息 。

斷點信息仍是很是給力的

 

個人項目須要先跑webpack 命令行運行 webpack dev server , 

咱們還能夠再配置一個 task  任務讓調試一鼓作氣，連續跑2個任務， 先跑 node 任務（webpack dev server） 再跑 chrom 調試。

在 .vscode 夾下新建 tasks.json 文件 ，並在script 上配置好在package.json 的腳本命令 

 

最後在 launch.json 增長 "preLaunchTask": "debug", 這裏的 debug 要對應tasks.json 裏的 label 名。tasks 是個數組能夠是多個。

ps ：這裏有個小技巧，你們能夠使用右下角的按鈕來添加 屬性。

這裏是全部 配置文檔 go.microsoft.com/fwlink/?lin…