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

image

第二步：我們把項目create-react-app創建的app跑起來，也就是運行命令

yarn start

它會自動打開一個頁面，我們把它的url地址復制下來。

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

到下面這個頁面。

image

點選左上角的+號，選擇JavaScript Debug，出現下面的界面。我們把復制的URL鏈接復制到下面的方框里。

image

然后在File/Directory中找到你的項目的地址，定位到src位置，在它的右邊Remote URL部分設置webpack:///src，以讓webstorm可以定位你的項目，建立映射關系。

第四步：運行，不過我們這里的運行需要你點運行右邊的那個蟲子按鈕，入下圖：

image

它會談出下圖的框，點擊右下角DEBUG按鈕。

image

第五步：如果你已經打了斷點了，那么相比已經過來了吧。

F4CDA2EC-7553-4D93-9B04-09D5E2C3CA22.png

需要注意的是，我們在第三步設置URL的時候，不要在下面的Before launch:Show this page,Activate tool window這一欄里添加這個項目npm start或者yarn start的啟動腳本，一定要先啟動項目，然后在點蟲子按鈕。

91214BB4-5473-4D5F-A7E6-3425A64D1C24.png

參考鏈接：https://www.jianshu.com/p/87a5609c5f44

總結

以上是生活随笔為你收集整理的webstorm下debug调试react js程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。