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

实时预览变更的页面

相关推荐
Henry_Lau61710 小时前
主流IDE常用快捷键对照
前端·css·ide
我命由我1234511 小时前
VSCode - Prettier 配置格式化的单行长度
开发语言·前端·ide·vscode·前端框架·编辑器·学习方法
Lv117700816 小时前
Visual Studio中的字典
ide·笔记·c#·visual studio
Alsn8617 小时前
24.idea专业版安装+maven、tomcat安装并部署到idea
java·ide·intellij-idea
苏打水com17 小时前
第十五篇:Day43-45 前端性能优化进阶——从“可用”到“极致”(对标职场“高并发场景优化”需求)
前端·css·vue·html·js
苏打水com17 小时前
第十六篇:Day46-48 前端安全进阶——从“漏洞防范”到“安全体系”(对标职场“攻防实战”需求)
前端·javascript·css·vue.js·html
有梦想的鱼17 小时前
vscode letax编译中英文论文(傻瓜式、一分钟)
ide·vscode·编辑器
qq_2147826118 小时前
GWalkR,部分替代Tableau!
ide·python·jupyter
联系QQ 1808095120 小时前
Comsol 助力多裂纹水力压裂扩展研究
webstorm
jiayong2321 小时前
IntelliJ IDEA 使用指南
java·ide·intellij-idea