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

实时预览变更的页面

相关推荐
北凉军1 小时前
更换PyCharm 任务栏图标
ide·python·pycharm
糯米导航2 小时前
浏览器解析HTML头部的底层逻辑:从字节流到渲染树的关键一步
前端·html
San813_LDD3 小时前
[Vue/HTML]ECharts 使用指南:从入门到绘制各种常用图表
vue.js·html·echarts
aHs0q8qoK3 小时前
Typora插件开发指南:打造专属IDE式写作环境
ide
就叫_这个吧3 小时前
HTML或JSP页面链接CSS,link标签没问题,但不显示样式问题解决
java·前端·css·html·intellij-idea·jsp
芋头莎莎3 小时前
window 右键菜单添加 vscode
ide·vscode·编辑器
王cb4 小时前
visual studio 编辑器 卡钝解决方法
ide·编辑器·visual studio
小此方4 小时前
【别传:Web前端开发(一)】快速构筑项目外壳:HTML 核心标签复习指南
前端·html
LaughingZhu4 小时前
Product Hunt 每日热榜 | 2026-06-10
前端·人工智能·经验分享·chatgpt·html
yeflx4 小时前
vscode-server下载异常导致远程连接失败解决方法
ide·vscode·编辑器