westorm vue如何启动debug

WebStorm可以调试debug，非常方便，下面将详细介绍如何调试debug，但需要提前安装好以下插件。
注意：1. 谷歌浏览器插件 JetBrains IDE Support
https://chrome.zzzmh.cn/info?token=hmhgeddbohgjknpmjagkdomcpobmllji
2. 每新建一个项目，都需要重新设置一遍

1. 启动项目(需要提前设置以下2-3步)

2. 编辑配置里设置npm

   
   
   image.png
   
   
   image.png
   
   
   image.png

3. 点击运行项目，得到域名+端口号，同时会跳转到登陆页面

   
   
   image.png
   
   
   image.png

4. 编辑配置里设置javascript debug

   
   
   image.png
   
   
   image.png

5. 跳转到页面后，找开F12控制台，任意点击一个功能，获取你将要debug的url，然后去到代码页面全局搜索，把搜索出来的所有组件都点开并且打上断点(因为多处调用同一个接口，不清楚具体是哪一个)

   
   
   获取你将要debug的url
   
   
   然后去到代码页面全局搜索
   
   
   搜索出来的打上断点

6. 切换到第4步定义好的debug处

   
   
   image.png

7. 点击debug图标，启动debug，成功后会自动跳出页面

   
   
   image.png
   
   
   启动debug，成功后自动跳出的页面

8. 这时去点击你debug的url的按钮，然后跳转到代码页面成功的debug了

   
   
   代码页面成功的debug
   
   
   成功debug后，代码页会显示请求后台的数据
   
   
   debug页面

9. 按F8一路看代码的逻辑，最后跳出当前文件后就表示这次debug完了，然后按F9结束本次debug。