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

实时预览变更的页面

相关推荐
诗水人间18 小时前
VsCode 中使用Copilot调用Deepseek V4模型
ide·vscode·copilot
梦想家加一18 小时前
vscode为什么下载了汉化插件却不生效
ide·vscode·编辑器
Python大数据分析@19 小时前
HTML会代替Markdown吗?为什么?
前端·html
一棵树735119 小时前
js总结介绍
前端·javascript·html
ZC跨境爬虫19 小时前
跟着 MDN 学CSS day_2:(连接样式表与选择器的实战艺术)
java·前端·css·ui·html·媒体
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_1:(CSS 基石与色彩的艺术)
前端·javascript·css·ui·html
NiceCloud喜云20 小时前
Claude API 流式输出(SSE)实战:从打字机效果到工具调用全流程
java·前端·ide·人工智能·chrome·intellij-idea·状态模式
多云的夏天20 小时前
IDE-VSCODE-Continue + DeepSeek V4
ide·vscode·编辑器·deepseek
ZC跨境爬虫21 小时前
模块化烹饪小程序开发日记 Day4:网络层基础设施与接口治理实践
前端·javascript·数据库·ui·html
Mr -老鬼21 小时前
EasyClick AI全自动编程,AI IDE选型真难?
ide·人工智能·自动化·ai编程·easyclick·易点云测