Webstorm debug调试相关

网上有挺多关于Webstorm 怎么进行debug调试的文章，以前自己参考的时候也碰到一些问题,现在来做个记录，也方便有类似问题的人做个参考，顺便也介绍下基本的debug配置（凑点字数,k^_^k）
小白看看就可以了

1.下载JetBrains IDE Support

介于这个需要科学上网进行操作，考虑大家懒的可能，就给个网盘链接:
https://pan.baidu.com/s/1SxQxVGQXbyUdP80ZgaQgTQ 密码: f9n8

2.Webstorm 配置

点击edit configuration 进行添加JavaScript debug 配置项
下图为配置好的项:
NAME:为命令名称，随便取个就可以了
URL：本地 服务的地址
Browser:选择谷歌浏览器

下面还有个before launch:.....
这个是用于在启动debug命令前进行启动服务的 命令 ,就是通常说的npm run dev

一般只要写dev就可以了

3.配置JetBrains IDE Support

Webstorm配置好了，但直接启动命令和打断点，并不会出现效果，这里需要右键打开
JetBrains IDE Support配置项，点击inspect in webstorm ,将浏览器的这个功能开启，才会在webstrom上看到效果.

如果功能正常开启的话，红色断点处会有个打勾的样式，
效果如下：