網(wǎng)上有挺多關(guān)于Webstorm 怎么進行debug調(diào)試的文章，以前自己參考的時候也碰到一些問題,現(xiàn)在來做個記錄，也方便有類似問題的人做個參考，順便也介紹下基本的debug配置（湊點字數(shù),k^_^k）
小白看看就可以了

1.下載JetBrains IDE Support

介于這個需要科學(xué)上網(wǎng)進行操作，考慮大家懶的可能，就給個網(wǎng)盤鏈接:
https://pan.baidu.com/s/1SxQxVGQXbyUdP80ZgaQgTQ 密碼: f9n8

2.Webstorm 配置

點擊edit configuration 進行添加JavaScript debug 配置項
下圖為配置好的項:
NAME:為命令名稱，隨便取個就可以了
URL：本地 服務(wù)的地址
Browser:選擇谷歌瀏覽器

下面還有個before launch:.....
這個是用于在啟動debug命令前進行啟動服務(wù)的 命令 ,就是通常說的npm run dev

一般只要寫dev就可以了

3.配置JetBrains IDE Support

Webstorm配置好了，但直接啟動命令和打斷點，并不會出現(xiàn)效果，這里需要右鍵打開
JetBrains IDE Support配置項，點擊inspect in webstorm ,將瀏覽器的這個功能開啟，才會在webstrom上看到效果.

如果功能正常開啟的話，紅色斷點處會有個打勾的樣式，
效果如下：