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

实时预览变更的页面

相关推荐
郁大锤7 小时前
Android Studio 国内镜像使用与 SDK 下载速度优化指南
android·ide·android studio
界面开发小八哥8 小时前
「Java EE开发指南」用MyEclipse开发EJB 3无状态会话Bean(二)
java·ide·java-ee·eclipse·myeclipse
电子艾号哲8 小时前
Vscode开发STM32标准库
ide·vscode·stm32
利刃之灵9 小时前
03-HTML常见元素
前端·html
听风吹等浪起10 小时前
基于html实现的课题随机点名
前端·html
Mitchell_C11 小时前
语义化 HTML (Semantic HTML)
前端·html
皓月盈江11 小时前
使用谷歌浏览器自带功能将网页转换为PDF文件
chrome·pdf·html·网页转pdf·谷歌浏览器打印功能
马院代表人11 小时前
IDEA内存配置失效(已解决)
java·ide·intellij-idea
码农sssss11 小时前
idea30天使用无限使用
java·ide·intellij-idea
Json_12 小时前
vue2练习项目 家乡特色网站—前端静态网站模板
前端·vue.js·html