环境搭建
简介
Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处：
- 方便，不用去切换。
- 他可以直接把一些参数类型、数值结果直接显示在代码上面。
安装插件
1.Chrome安装JetBrains IDE Support
https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
2.配置端口（若不报此错误可不配置：ERR_CONNECTION_REFUSED）
如果你的端口刚好被占用，需要修改相应的端口。Chrome和WebStorm都要修改
1.Chrome插件修改
右键插件=> 选项=> 可修改host（默认127.0.0.1）和端口（默认63342）
2.WebStorm修改
File=> Settings=> Build,Execution,Deployment=> Debugger=> 右侧=> Built-in server=> Port（默认63342）
注意：如果不配置这两者端口为同一个端口，有时会报错：ERR_CONNECTION_REFUSED
调试HTML
前提
Chrome安装JetBrains IDE Support
1.创建工程
本处直接创建一个空工程，创建Demo.html与Demo.js（Demo.html中调用Demo.hs）
2.配置Idea
Run=> Edit Configurations=> 左上角“+”=> JavaScript Debug=>
Name：随便起个名字
URL：选择Demo.html
Browser：选择浏览器（若不选择会使用系统默认浏览器）
3.运行调试
在Demo.js中打个断点=> 点击"Debug"按钮=> 现象如下
Chrome显示：“JetBrains IDE Support”正在调试此浏览器=> 跳转到Webstorm的调试界面
注意
此方法是有缓存的。若修改了代码，需要运行第二次才行。
调试Vue
其他网址
webstorm 调试vue项目 - 简书
前提
Chrome安装JetBrains IDE Support
1.修改config/index.js
devtool: 'cheap-module-eval-source-map', 改为：devtool: 'source-map',
2. 运行项目（dev或者start）
法1：通过npm界面启动
WebStorm有个npm组件，可以直接以dev或者start启动，如下图所示
法2：通过通用方法启动
第一步：添加启动配置
Run=> Edit Configurations=> 左上角“+”=> npm=> Command选择dev或者start都可以
第二步：启动
3.配置debug
Run=> Edit Configurations=> 左上角“+”=> JavaScript Debug=>
注意：URL必须对应config/index.js里边的host和port配置，本处，我的config/index.js配置为：
host: 'localhost',
port: 8080,所以，URL必须这么填：http://localhost:8080
4.debug
此时，会自动跳转到谷歌浏览器界面，如下：
输入自己项目的url即可：
当然，可以在相应代码的任意位置打断点，重新访问时就会跳到打断点的地方：
