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

实时预览变更的页面

相关推荐
anOnion2 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
前端Hardy2 天前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
前端Hardy3 天前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
前端Hardy3 天前
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!
css·html
DeathGhost3 天前
分享URL地址到微信朋友圈没有缩略图?
前端·html
前端Hardy4 天前
HTML&CSS:高颜值产品卡片页面,支持主题切换
css·html
Never_Satisfied4 天前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html
你怎么知道我是队长4 天前
前端学习---HTML---块元素和行内元素
前端·学习·html
Diligently_4 天前
idea 中vm option 配置
java·ide·intellij-idea
holeer4 天前
【V1.0】Typora 中的 HTML 支持|软件文档自翻译
前端·编辑器·html·typora·web·markdown·文档