直接在已打开页面的浏览器中使用WebStorm进行调试

1、开发环境

1. chrome
2. JetBrains IDE Support
3. WebStorm2018.3

2、环境配置

2.一、WebStorm创建debug

首先在WebStorm中创建debug调试，步骤如图1-图3所示。

图1

图2

图3

2.二、配置JetBrains IDE Support

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

图4

2.三、开始调试

选择WebStorm的调试按钮进行调试，调试按钮如图5所示。

图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所示。

图6