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效果了。

实时预览变更的页面

相关推荐
全栈老石4 小时前
设计师到前端不再有墙:Figma + VS Code 自动出码实践
前端·vue.js·html
全宝4 小时前
【前端特效系列】css+js实现聚光灯效果
javascript·css·html
界面开发小八哥4 小时前
「Java EE开发指南」如何使用MyEclipse中的Web Fragment项目?
java·ide·java-ee·eclipse·myeclipse
遗悲风5 小时前
html抽奖功能
前端·html
充气大锤6 小时前
从0开始配置conda环境并在PyCharm中使用
ide·pycharm·conda
LilyCoder7 小时前
HTML5二十四节气网站源码
前端·javascript·html·html5
rannn_11119 小时前
【Javaweb学习|黑马笔记|Day1】初识,入门网页,HTML-CSS|常见的标签和样式|标题排版和样式、正文排版和样式
css·后端·学习·html·javaweb
QL.ql20 小时前
vscode的ws环境,esp32s3连接wifi
ide·vscode·编辑器
阿波罗尼亚1 天前
@Autowired @Resource IDE警告 和 依赖注入
ide
坠金1 天前
不同ide回到上一个文件快捷键
ide