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

实时预览变更的页面

相关推荐
非鱼䲆鱻䲜5 小时前
vscode开发stm32添加新的头文件路径和包含源文件
ide·vscode·stm32·cmake·包含头文件·包含源文件
chushiyunen9 小时前
pycharm注意力残差示例
ide·python·pycharm
柒.梧.11 小时前
Redis通用命令+五大核心数据结构
前端·bootstrap·html
Dxy123931021612 小时前
HTML常用标签详解
前端·html
Willliam_william13 小时前
QEMU学习之路(11)— 使用VSCode调试qemu-system-riscv64
ide·vscode·学习
LiuYaoheng13 小时前
问题记录:Android Studio Low memory
android·ide·android studio
椰猫子14 小时前
JDK概述、Maven概述、IDEA概述、常见注解、 Spring Boot + SSM概述、RESTFul编程风格概述
java·ide·intellij-idea
Java基基15 小时前
Idea 插件推荐可直接修改jar包内文件的IDEA插件,无需解压
java·ide·intellij-idea
Predestination王瀞潞15 小时前
5.4.1 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web)基本信息&核心设计目标&现实意义
css·网络·网络协议·html·url·www
圣殿骑士-Khtangc15 小时前
Trae IDE AI 编程超全使用教程|从入门到精通,解锁 AI 开发新效率
ide·人工智能·ai编程·编程助手·trae