直接在已打开页面的浏览器中使用WebStorm进行调试
一、开发环境
- chrome
- JetBrains IDE Support
- WebStorm2018.3
二、环境配置
2.1、WebStorm建立debug
首先在WebStorm中建立debug调试,步骤如图1-图3所示。
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224651311-659015798.png)
![](index_files/bda6bb49-16c4-4ae3-9378-f98f7a52e080.png)
图1
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224720071-1475262025.png)
![](index_files/52d51e44-1ee7-4599-9410-89cb83855c8c.png)
图2
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224743493-1330774169.png)
![](index_files/c4faae5f-258a-476b-b756-5f48ddf26404.png)
图3
2.2、配置JetBrains IDE Support
在chrome上安装JetBrains IDE Support插件然后进行配置,只需要确保端口和webstorm中调试的端口一致即可。具体配置选项如图4所示。
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224812063-2132180741.png)
![](index_files/4d8b3011-21df-471c-894f-9f59bd8ad873.png)
图4
2.3、开始调试
选择WebStorm的调试按钮进行调试,调试按钮如图5所示。
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224850415-195681022.png)
![](index_files/bf44f16d-301d-46da-8535-077734a22ac1.png)
图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所示。
![](https://img2018.cnblogs.com/blog/1274744/201812/1274744-20181207224912176-959499191.png)
![](index_files/e735af01-f700-4d57-a4e4-9e5de561daf8.png)
图6