1. 先添加webstorm運(yùn)行React設(shè)置

在Edit Configurations中

添加npm

Command： run

Scripts：start

2. 再添加“Debug88”設(shè)置

在Edit Configurations中，新建JavaScript Debug，命名：“Debug88”，并設(shè)置要訪問的url，對應(yīng)的URL是項(xiàng)目啟動之后所對應(yīng)的訪問地址，例如http://localhost:8080

3. 先運(yùn)行React

再切換配置到“Debug88”，再次點(diǎn)擊Debug“Debug88”按鈕，這時(shí)候會重新打開chrome ，進(jìn)行斷點(diǎn)調(diào)試。

4. 條件斷點(diǎn)

右擊斷點(diǎn)，在“Condition”中輸入，布爾表達(dá)式，如果布爾表達(dá)式=true，命中斷點(diǎn)，否則不停。

注意：

在WebStorm中啟動調(diào)試時(shí)，WebStorm會根據(jù)你設(shè)置的url，自動打開新的Chrome瀏覽器進(jìn)程訪問這個(gè)設(shè)置的url，而且這個(gè)瀏覽器頁面和你平?？吹降臑g覽器差異會比較大，看不到書簽欄，也看不到你先前所裝的所有插件。這是因?yàn)槠匠Ｎ覀兇蜷_Chrome瀏覽器進(jìn)程時(shí)，并不會添加–remote-debugging-port選項(xiàng)，而WebStorm無法讓已經(jīng)打開的Chrome實(shí)例支持調(diào)試，所以必須重新打開一個(gè)新的Chrome瀏覽器進(jìn)程，而且不能和原來的Chrome瀏覽器進(jìn)程使用相同的用戶數(shù)據(jù)文件夾。我們可以在這個(gè)瀏覽器上登錄我們的google賬號，然后將所有數(shù)據(jù)同步過來，這樣下次調(diào)試時(shí)所有的書簽和安裝的應(yīng)用也就都會存在了。我們也就可以將原來瀏覽器的數(shù)據(jù)導(dǎo)出到新的文件夾，然后在WebStorm中設(shè)置Chrome的用戶數(shù)據(jù)文件夾為這個(gè)新的文件夾，這樣也能將所有的書簽和安裝的應(yīng)用導(dǎo)過來。