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

实时预览变更的页面

相关推荐
Eason_Lou4 小时前
webstorm开发vue项目快捷跳转到vue文件
ide·vue.js·webstorm
Jinuss5 小时前
HTML页面http-equiv=“refresh“自动刷新原理详解
http·html
猫头虎12 小时前
Claude Code 永动机:ralph-loop 无限循环迭代插件详解(安装 / 原理 / 最佳实践 / 避坑)
ide·人工智能·langchain·开源·编辑器·aigc·编程技术
我命由我1234513 小时前
Android Studio - Android Studio 去除 import 的未使用的类
android·java·ide·学习·java-ee·android studio·学习方法
沉默璇年13 小时前
如何通过python脚本下载高德离线底图瓦片并使用?
javascript·python·html
BianHuanShiZhe14 小时前
swift计算文本高度
前端·javascript·html
23级二本计科14 小时前
前端 HTML + CSS + JavaScript
前端·css·html
hi0_614 小时前
vibe coding 开发软件(一) 模型选择和agent简单使用
ide·个人开发·visual studio
VekiSon15 小时前
综合项目实战——电子商城信息查询系统
linux·c语言·网络·http·html·tcp·sqlite3
惊讶的猫15 小时前
vscode+conda
ide·vscode·conda