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

实时预览变更的页面

相关推荐
18538162800余+6 小时前
深入解析:什么是矩阵系统源码搭建定制化开发,支持OEM贴牌
java·服务器·html
少年阿闯~~7 小时前
CSS——实现盒子在页面居中
前端·css·html
妄小闲8 小时前
免费html网页模板 html5网站模板 静态网页模板
前端·html·html5
寒山李白9 小时前
VSCode中Python库识别的设置(关于解决VSCode中Python库引入未下载的库不显示黄色虚线的问题)
ide·vscode·python
妄小闲10 小时前
html网站模板 html网页设计模板源码网站
前端·html
深鱼~11 小时前
VSCode+WSL+cpolar:打造跨平台的随身Linux开发舱
linux·ide·vscode
豆豆の爸爸12 小时前
IDEA 2024的零卡死配置
ide
豆豆豆大王13 小时前
Android studio图像视图和相对布局知识点
android·ide·android studio
zhangfeng113314 小时前
phpstorm content.dat.storageData 文件解析:作用、风险与处理建议
ide·phpstorm
指针不南15 小时前
Visual Studio 2022 / VS2022 激活码
ide·visual studio