1. 先添加webstorm運(yùn)行React設(shè)置
在Edit Configurations中
添加npm
Command： run
Scripts：start
2. 再添加“Debug88”設(shè)置
在Edit Configurations中伤哺，新建JavaScript Debug屈芜，命名：“Debug88”应狱，并設(shè)置要訪問的url碳抄，對(duì)應(yīng)的URL是項(xiàng)目啟動(dòng)之后所對(duì)應(yīng)的訪問地址饥伊，例如http://localhost:8080
3. 先運(yùn)行React
再切換配置到“Debug88”，再次點(diǎn)擊Debug“Debug88”按鈕席镀，這時(shí)候會(huì)重新打開chrome 诱桂，進(jìn)行斷點(diǎn)調(diào)試。
4. 條件斷點(diǎn)
右擊斷點(diǎn)淑掌，在“Condition”中輸入蒿讥，布爾表達(dá)式，如果布爾表達(dá)式=true，命中斷點(diǎn)芋绸，否則不停媒殉。
注意：
在WebStorm中啟動(dòng)調(diào)試時(shí)，WebStorm會(huì)根據(jù)你設(shè)置的url摔敛，自動(dòng)打開新的Chrome瀏覽器進(jìn)程訪問這個(gè)設(shè)置的url廷蓉，而且這個(gè)瀏覽器頁面和你平常看到的瀏覽器差異會(huì)比較大马昙，看不到書簽欄桃犬，也看不到你先前所裝的所有插件。這是因?yàn)槠匠Ｎ覀兇蜷_Chrome瀏覽器進(jìn)程時(shí)行楞，并不會(huì)添加–remote-debugging-port選項(xiàng)攒暇，而WebStorm無法讓已經(jīng)打開的Chrome實(shí)例支持調(diào)試，所以必須重新打開一個(gè)新的Chrome瀏覽器進(jìn)程子房，而且不能和原來的Chrome瀏覽器進(jìn)程使用相同的用戶數(shù)據(jù)文件夾形用。我們可以在這個(gè)瀏覽器上登錄我們的google賬號(hào)，然后將所有數(shù)據(jù)同步過來证杭，這樣下次調(diào)試時(shí)所有的書簽和安裝的應(yīng)用也就都會(huì)存在了田度。我們也就可以將原來瀏覽器的數(shù)據(jù)導(dǎo)出到新的文件夾，然后在WebStorm中設(shè)置Chrome的用戶數(shù)據(jù)文件夾為這個(gè)新的文件夾解愤，這樣也能將所有的書簽和安裝的應(yīng)用導(dǎo)過來镇饺。
