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

实时预览变更的页面

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落3 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
xy345310 小时前
Axure9.0 中继器遮罩的核心应用场景(精准适配列表交互)
前端·ui·html·原型·产品设计·axure9.0
sunburn-11 小时前
Java堆(Heap)详解与实战教学
java·开发语言·数据结构·ide·算法
Data_Journal11 小时前
Scrapyd:分步教程
开发语言·python·microsoft·golang·编辑器·html·iphone
labixiong13 小时前
button按钮原生开关弹窗,零 JS 搞定80%交互场景
前端·javascript·html
逐步前行14 小时前
ESP32-S3-VSCode扩展ESP-IDF
ide·vscode·编辑器
171320330计算机毕设编程16 小时前
2027计算机毕设五大方向对比&选题推荐
java·ide·python·算法·django·php·推荐算法
降临-max16 小时前
Selenium(HTML+JavaScript&DOM+Selenium IDE)
自动化测试·selenium·测试工具·html
用户2986985301416 小时前
PDF 转 HTML 全攻略:三种方法轻松搞定网页转换
c#·html·.net
2501_9160088918 小时前
Flutter 开发 iOS,项目打包成 IPA,命令与免 Xcode两种方法
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程