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

实时预览变更的页面

相关推荐
&白帝&33 分钟前
使用vite-plugin-html在 HTML 文件中动态注入数据,如元数据、环境变量、标题
前端·html·dreamweaver
娃哈哈哈哈呀1 小时前
html - <mark>标签
前端·html
potender1 小时前
前端基础学习html+css+js
前端·css·学习·html·js
Hilaku1 小时前
为什么越来越多 Vue 项目用起了 UnoCSS?
前端·css·html
Java斌2 小时前
70年使用权的IntelliJ IDEA Ultimate安装教程
java·ide·intellij-idea
weixin_466485112 小时前
PyCharm中运行.py脚本程序
ide·python·pycharm
aningxiaoxixi3 小时前
Android Studio 之基础代码解析
android·ide·android studio
站在风口的猪11083 小时前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
界面开发小八哥4 小时前
「Java EE开发指南」如何使用MyEclipse在Web项目中用Web Fragments?
java·前端·ide·java-ee·eclipse·myeclipse
薛定谔的算法5 小时前
从Web1.0到WebLLM:前端如何通过HTTP API拥抱大模型?
html