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

实时预览变更的页面

相关推荐
AI视觉网奇7 分钟前
vscode 默认环境路径
ide·vscode·编辑器
航Hang*3 小时前
前端项目2-01:个人简介页面
前端·经验分享·html·css3·html5·webstorm
王光环4 小时前
vscode与keil的乱码不兼容问题
ide·vscode·编辑器
萑澈4 小时前
迁移 Visual Studio Code 设置和扩展到 VSCodium
ide·vscode·编辑器
水银嘻嘻5 小时前
Web 自动化之 HTML & JavaScript 详解
前端·自动化·html
胡斌附体7 小时前
idea查看pom文件依赖
java·ide·intellij-idea·maven依赖
良木林7 小时前
HTML难点小记:一些简单标签的使用逻辑和实用化
前端·html
早上好啊! 树哥18 小时前
android studio开发:设置屏幕朝向为竖屏,强制应用的包体始终以竖屏(纵向)展示
android·ide·android studio
tmy_starlight1 天前
2025年全新 GPT 4.5 AI 大模型 国内免费调用
ide·gpt·编辑器
哈桑compile1 天前
用纯HTML和CSS仿写知乎登录页面
前端·css·html