phpstorm, webstorm debug調試JS

 

第一步：給你的Chrome添加JetBrains IDE Support的插件，需要FQ，就是下圖的這個。

 

第二步：我們把項目跑起來，也就是運行命令，我這邊是

yarn run start

　　

第三步：打開Webstorm（Phpstorm）的運行窗口，點擊Edite Connfigurations

添加一個JavaScript Debug

 

name可以自定義，URL根據自己實際情況，（我這邊沒有在下面的Before launch:Show this page,Activate tool window這一欄里添加這個項目npm start或者yarn start的啟動腳本，一定要先啟動項目，然后在點蟲子按鈕）

 

需要設置的話，配置如下，具體命令和package.json根據實際情況配置

 

 

瀏覽器的配置，點擊后就后開啟監控

點小蟲蟲開始debug，谷歌瀏覽器會彈出一個獨立的瀏覽器頁面用於調試

 

重點來了，有時候你在編輯器的代碼可能斷點不了，可以用console.log()打印，然后在瀏覽器點進源碼進行斷點，觸發時會自動聯動到編輯器