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

实时预览变更的页面

相关推荐
ZhengEnCi6 天前
Q02-Vue-React-index.html完全指南
vue.js·react.js·html
牧艺6 天前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
爱勇宝6 天前
我给自己做了一个新标签页:不登录、不打扰、打开就能用
前端·html·浏览器
越努力越幸运667 天前
多模态代码调试实战:Gemini3.5 精准捕获 HTML 隐性语法
html
anOnion11 天前
构建无障碍组件之Menu Button pattern
前端·html·交互设计
米丘12 天前
微前端之 Web Components 完全指南
微服务·html
摇滚侠14 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
Metaphor69214 天前
使用 Python 将 PDF 转换为 HTML
python·pdf·html
霸道流氓气质14 天前
Trae IDE 新手入门指南
ide
a11177614 天前
“黑夜流星“个人引导页 网页html
java·前端·html