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

实时预览变更的页面

相关推荐
七灵微25 分钟前
【前端】简单原生实例合集html,css,js
前端·css·html
帅杰IT大神2 小时前
新版本的idea用不习惯,怎么还原为之前版本的UI界面?idea界面还原,idea新版本ui设置
java·ide·intellij-idea·idea·intellij idea·2025
laiger902 小时前
VSCode轻松调试运行.Net 8.0 Web API项目
ide·vscode·c#·编辑器·.net·.netcore
青春_strive2 小时前
HTML操作详解
前端·html
海绵波波1073 小时前
vscode+vue前端开发环境配置
ide·vue.js·vscode
登登登__4 小时前
HTML/CSS/JS
javascript·css·html
liubing51886 小时前
IDEA 2024.1 最新永久可用(亲测有效)
java·ide·intellij-idea
@正在学习驰骋的小马7 小时前
在PyCharm中集成AI编程助手并嵌入本地部署的DeepSeek-R1模型:打造智能开发新体验
ide·pycharm·ai编程
吃汤圆的抹香鲸7 小时前
PhpStorm 绿色版 安装包 Win/Mac/Linux 商业的PHP集成开发环境 2025全栈开发终极指南:从零配置到企业级实战
linux·ide·windows·macos·php·intellij-idea·phpstorm