webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果

前言

我们平时在前端网页修改好代码要点击刷新再去看修改的效果,这样比较麻烦,那么很多软件都提供了实时预览的功能,我们一边编辑代码一边可以看到效果。下面说的是webstorm。

1 Live Edit

首先我们需要在webstorm的settings里安装插件Live Edit(一般会已经下载好)。

然后在settings里如下图所示路径找到插件进行设置。

2 JetBrains IDE Support 插件下载

阿里云盘地址

链接:https://www.alipan.com/s/ksu6C2k35z9

提取码:9ed6

将文件直接拖入下图的chrome扩展程序页面即可完成安装。

确认添加

ip地址和端口号自动生成,一般无需去改。下面就可以使用webstorm实现实时预览html效果了。

实时预览变更的页面

相关推荐
共享家95276 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
CSDN_RTKLIB10 小时前
Visual Studio不改变文件编码情况下解决C2001
c++·ide·visual studio
一只大马猴呀13 小时前
IntelliJ IDEA 中启动项目不显示端口号
java·ide·intellij-idea
史丹利复合田15 小时前
【无标题】vscode远程连接,服务器端配置
ide·vscode·编辑器
web打印社区15 小时前
vue页面打印:printjs实现与进阶方案推荐
前端·javascript·vue.js·electron·html
gusijin17 小时前
解决idea启动报错java: OutOfMemoryError: insufficient memory
java·ide·intellij-idea
吨~吨~吨~17 小时前
解决 IntelliJ IDEA 运行时“命令行过长”问题:使用 JAR
java·ide·intellij-idea
HAPPY酷17 小时前
为啥双击 .sln 文件即可在 Visual Studio 中加载整个解决方案
ide·visual studio
summer_du17 小时前
IDEA插件下载缓慢,如何解决?
java·ide·intellij-idea
iwanghang18 小时前
Android Studio 2023.2.1 新建项目 不能选择Java 解决方法
android·ide·android studio