2021最新方法WebStorm实现浏览器代码同步刷新

前言

• 使用的工具
• webstorm的设置
• 两种方法
• • 360浏览器篇
  • Google Chrome篇

这是我的第一篇博客，因为这次的webstorm代码和浏览器同步刷新的功能添加花费了我大量的时间，查找的方法也都是不可靠的或者说是过时的。所以我自己就想写一个最新的方法来让萌新们避雷。下面我将介绍两种方法来实现我们的web开发所见即所得的功能，让webstorm成为我们的web开发神器。

WebStorm
JetBrains IDE Support（下载地址下面我会附链接）

安装浏览器插件前需要对webstorm进行设置

打开WebStorm，打开文件->构建、执行、部署->调试器->LiveEdit。若没有安装汉化包的webstorm->file->setting搜 live edit 。
勾选Update application in Chrome on changes in 50 ms 这个50ms，根据你们的需求填写，若需要1秒之后刷新填写1000ms即可。
勾选Restart if hotswap fails和Use JetBRains IDE Support extension…（太长了省略）
【注】如果你的webstorm搜索不到live Edit，你就去Plugins里面下载安装，（图中有箭头标志）。

这样我们在WebStorm上就设置好了，接下来让我们来设置chrome浏览器上的。

两种方法都是亲测可用的，谷歌浏览器和360浏览器

360浏览器篇

首先下载链接: JB插件.如果插件失效也可加我qq375366062
插件默认的后缀是crx直接打开，打开方式是360浏览器，插件可以直接安装。

默认的webstorm中没有360浏览器打开按钮，我们要来进行设置，如下图，见图思意



点击+号添加一个浏览器，更改name为360，Family不管它，Path选择你的360exe的路径。然后点击ok。

browser选择刚刚添加的360

点击此按钮进行调试

如果出现这样的错误提示，说明需要更改一下端口号

浏览器右上角点选项

这里port改成和webstorm一样的端口号，然后点击apply，防止无效可以多点击两下，然后再去webstorm点击调试按钮

自动跳转到此界面就说明功能已经成功安装。可以实现代码和界面实时更新

Google Chrome篇

crx谷歌浏览器不支持，所以需要在谷歌网上商店下载JB（JetBrains IDE Support）
具体的方法就不介绍了,自己体会，因为含有敏感词汇无法发布，和上面的类似，作者制作不易，还望多多收藏点赞，谢谢！具体还有问题可以加我qq或者评论区留言讨论。