一、开发环境

chrome
JetBrains IDE Support
WebStorm2018.3

二、Debug html

2.1、WebStorm建立debug

首先在WebStorm中建立debug调试，步骤如图1-图3所示。
webstrom使用和配置
图1

图2

图3

2.2、配置JetBrains IDE Support

在chrome上安装JetBrains IDE Support插件然后进行配置，只需要确保端口和webstorm中调试的端口一致即可。具体配置选项如图4所示。
webstrom使用和配置
图4

2.3、开始调试

选择WebStorm的调试按钮进行调试，调试按钮如图5所示。
webstrom使用和配置
图5

注意：现在选择进行调试会重新打开一个chrome浏览器，这个新打开的chrome浏览器没有任何插件和书签，是非常干净的一个chrome。当然，如果在这个干净的chrome中想要自己插件和书签，只需要登录自己的chrome账号即可进行插件和书签的同步。这样下次再次进行调试调试打开的chrome上就会拥有相应的书签和插件。（当然前提是要能够登录chrome账号）。
从上面的步骤可以看出其实我们安装的JetBrains IDE Support插件根本就没有体现出作用。那JetBrains IDE Support有什么作用呢？这个插件的主要作用就是能够在当前已经打开的chrome中进行调试，不需要重新打开新的chrome进行调试。那应该怎么设置呢？通过一个偶然的事件，发现需要设置Live Edit选项。在 File->Settings->Build,Execution,Deployment->Live Edit->选择使用JetBrains IDE Support插件调试。具体设置如图6所示。
webstrom使用和配置
图6