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

实时预览变更的页面

相关推荐
触底反弹11 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
qq_4523962320 小时前
第二篇:《Go 开发环境搭建:SDK、IDE、Module 与 Hello World》
开发语言·ide·golang
两点王爷21 小时前
一个快速加载面和多面数据的html测试页面(可以导出geojson数据文件)
前端·html·gis
可视化运维管理爱好者21 小时前
nVisual Studio:数据中心网络智能规划设计工具
网络·ide·visual studio
李顿波1 天前
开发全流程:Ai 简单指导
ide
2501_915921431 天前
从零开始学 Swift iOS 开发 iOS应用入门
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
杨超越luckly1 天前
Agent应用指南:长三角41城跨城人口流动OD数据分析
python·数据挖掘·数据分析·html·可视化
不好听6131 天前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
null_172 天前
IntelliJ IDEA 极致流畅配置方案:Ultra 9 285K + 64GB 内存实测
java·ide·intellij-idea
爱吃提升2 天前
VSCode 配置 Claude + Codex 完整教程
ide·vscode·编辑器