和大家分享一下webstorm下面調(diào)試react js 程序，這個(gè)攻略參照了webstorm官網(wǎng)弄的，如果有梯子可以直接去看。
網(wǎng)址：調(diào)試使用WebStorm中的Create React App創(chuàng)建的React應(yīng)用程序，我們這里也是以create-react-app創(chuàng)建的快捷react項(xiàng)目為例。
步驟非常簡(jiǎn)單，只有有一些誤區(qū)。
第一步：添加給你的Chrome添加JetBrains IDE Support的插件，需要翻墻，就是下圖的這個(gè)。
image
第二步：我們把項(xiàng)目create-react-app創(chuàng)建的app跑起來(lái)，也就是運(yùn)行命令
yarn start
它會(huì)自動(dòng)打開(kāi)一個(gè)頁(yè)面，我們把它的url地址復(fù)制下來(lái)。
第三步：打開(kāi)Webstorm的運(yùn)行窗口，點(diǎn)擊Edite Connfigurations。
到下面這個(gè)頁(yè)面。
image
點(diǎn)選左上角的+號(hào)，選擇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)行，不過(guò)我們這里的運(yùn)行需要你點(diǎn)運(yùn)行右邊的那個(gè)蟲(chóng)子按鈕，入下圖：
image
它會(huì)談出下圖的框，點(diǎn)擊右下角DEBUG按鈕。
image
第五步：如果你已經(jīng)打了斷點(diǎn)了，那么相比已經(jīng)過(guò)來(lái)了吧。
F4CDA2EC-7553-4D93-9B04-09D5E2C3CA22.png
需要注意的是，我們?cè)诘谌皆O(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)蟲(chóng)子按鈕。
91214BB4-5473-4D5F-A7E6-3425A64D1C24.png
Over...
