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

实时预览变更的页面

相关推荐
战南诚1 小时前
前端开发vscode插件 - live server
ide·vscode·编辑器
wangbing11252 小时前
界面规范8-文字
前端·javascript·html
墨抒颖 msy.plus3 小时前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
jingling5555 小时前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
小菜全5 小时前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
luckyzlb6 小时前
02- html && css
前端·css·html
AI@独行侠6 小时前
04 - 【HTML】- 常用标签(下篇)
前端·html
空山新雨(大队长)6 小时前
HTML第九课:HTML5新增标签
前端·html·html5
Wish3D6 小时前
在前端开发中,html中script 的type分别有哪几种?分别什么情况用到?
前端·html
San306 小时前
JavaScript 入门精要:从变量到对象,构建稳固基础
javascript·面试·html