WebStorm可以調(diào)試debug，非常方便，下面將詳細(xì)介紹如何調(diào)試debug，但需要提前安裝好以下插件。
注意：1. 谷歌瀏覽器插件 JetBrains IDE Support
https://chrome.zzzmh.cn/info?token=hmhgeddbohgjknpmjagkdomcpobmllji
2. 每新建一個(gè)項(xiàng)目，都需要重新設(shè)置一遍
啟動(dòng)項(xiàng)目(需要提前設(shè)置以下2-3步)
-
編輯配置里設(shè)置npm
image.png
image.png
image.png -
點(diǎn)擊運(yùn)行項(xiàng)目，得到域名+端口號(hào)，同時(shí)會(huì)跳轉(zhuǎn)到登陸頁面
image.png
image.png -
編輯配置里設(shè)置javascript debug
image.png
image.png -
跳轉(zhuǎn)到頁面后，找開F12控制臺(tái)，任意點(diǎn)擊一個(gè)功能，獲取你將要debug的url，然后去到代碼頁面全局搜索，把搜索出來的所有組件都點(diǎn)開并且打上斷點(diǎn)(因?yàn)槎嗵幷{(diào)用同一個(gè)接口，不清楚具體是哪一個(gè))
獲取你將要debug的url
然后去到代碼頁面全局搜索
搜索出來的打上斷點(diǎn) -
切換到第4步定義好的debug處
image.png -
點(diǎn)擊debug圖標(biāo)，啟動(dòng)debug，成功后會(huì)自動(dòng)跳出頁面
image.png
啟動(dòng)debug，成功后自動(dòng)跳出的頁面 -
這時(shí)去點(diǎn)擊你debug的url的按鈕，然后跳轉(zhuǎn)到代碼頁面成功的debug了
代碼頁面成功的debug
成功debug后，代碼頁會(huì)顯示請(qǐng)求后臺(tái)的數(shù)據(jù)
debug頁面 按F8一路看代碼的邏輯，最后跳出當(dāng)前文件后就表示這次debug完了，然后按F9結(jié)束本次debug。
