對於程序員來說，代碼的Debug是必不可少的。而在調試前端代碼的時候很少用，都是在瀏覽器控制檯看代碼的console來觀察變量值，單使用瀏覽器調試代碼的缺點：
- 不能快速定位到我們編輯器相應代碼的地方
- 代碼裏邊會出現很多
console.log()，瀏覽器的控制檯一不小心就會變得很亂 - 如果需要打斷點，還需要從控制檯的sources中尋找到js文件進行斷點調試，有些腳手架的項目沒有開啓source-map，sources中的代碼都是壓縮的，沒有辦法找到我們的代碼進行斷點調試
下面爲大家安利一個Webstorm Debug前端代碼的方法，簡單方便實用
1. 運行項目，查看運行url
比如我的測試項目使用npm run serve運行後展示的端口是8080
2. 配置JavaScript Debug
3. Debug
這時webstorm會自動打開瀏覽器一個標籤並進入我們的項目，在瀏覽器中打開f12，然後就可以進行Debug了
大功告成，祝各位Debug順利！