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

实时预览变更的页面

相关推荐
IMPYLH10 小时前
HTML 的 <wbr> 元素
前端·html
cgblpx13 小时前
vscode的安装
ide·vscode·编辑器
zhaiyy15 小时前
HTML Popover API 实践
前端·javascript·html
JingliAlex16 小时前
企业微信自动回复的话术怎么过审?三级审核流程的搭法
大数据·html·企业微信
文祐17 小时前
Windows系统下载pycharm-community-2025.2
ide
ShineWinsu18 小时前
对于HTML:HTML常见标签的解析—上
前端·面试·html·浏览器·标签·图片·超链接
百度一下吧19 小时前
HTML5 新增标签与 Web Components 使用指南
前端·html·html5
tryCbest20 小时前
第一篇:HTML5 核心知识全解 + 项目起步
前端·html·html5
衡石科技20 小时前
一个门户只保留一个智能助理:衡石嵌入式 Data Agent 的运行与渲染边界
前端·javascript·html·data agent
言乐620 小时前
HTML实现Word、Excel、PPT三种可切换背景,可键盘打字、和像素小人交互
html·word·powerpoint·excel·交互