webstrom調試vue

第一種，使用vue插件

1. 下載插件：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

   

2. 這樣直接run一個vue項目，你就會看見插件標亮了

   

3. 打開調試模式，你就會看見最後有個vue標記，打開能看見當前vue頁面渲染相關數據

   

第二種，使用webstrom調試

1. 下載插件 https://chrome.google.com/webstore/search/jetbrains?utm_source=chrome-ntp-icon

2. 打開webstrom Debugger, 記住端口號

   

3. 打開剛纔安裝的插件，選項，填入剛纔看見的端口號

   

4. 添加一個debug配置

   

5. 這樣運行一個vue項目，而且在頁面上右鍵，就開啓了調試模式

   

隨意在webstrom上斷點調試，完美（此處有金星老師手勢）！！！！！！！！