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

image

第二步：我們把項(xiàng)目create-react-app創(chuàng)建的app跑起來，也就是運(yùn)行命令

yarn start

它會(huì)自動(dòng)打開一個(gè)頁面，我們把它的url地址復(fù)制下來。

第三步：打開Webstorm的運(yùn)行窗口，點(diǎn)擊Edite Connfigurations。

到下面這個(gè)頁面。

image

點(diǎn)選左上角的+號，選擇JavaScript Debug，出現(xiàn)下面的界面。我們把復(fù)制的URL鏈接復(fù)制到下面的方框里。

image

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

第四步：運(yùn)行，不過我們這里的運(yùn)行需要你點(diǎn)運(yùn)行右邊的那個(gè)蟲子按鈕，入下圖：

image

它會(huì)談出下圖的框，點(diǎn)擊右下角DEBUG按鈕。

image

第五步：如果你已經(jīng)打了斷點(diǎn)了，那么相比已經(jīng)過來了吧。

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。