当前位置: 首页 > article >正文

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

实时预览变更的页面


http://www.kler.cn/a/564543.html

相关文章:

  • redis restore 命令的用法
  • postgresql postgis扩展相关
  • 【Leetcode刷题记录】46. 全排列
  • Python--模块(上)
  • 【uniapp】在UniApp中实现持久化存储:安卓--导出数据为jsontxt
  • 一文5分钟掌握基于JWT的模拟登录爬取实战
  • Element实现el-dialog弹框移动、全屏功能
  • Ubuntu24.04设置静态IP地址
  • 多线程之旅:锁策略
  • 使用DeepSeek/chatgpt等AI工具辅助网络协议流量数据包分析
  • 大语言模型概念科普
  • 计算机毕业设计 ——jspssm510springboot 的人职匹配推荐系统
  • uniapp vue3实现的一款数字动画调节器件,支持长按、单点操作,提供丝滑的增减动画效果
  • Ecode前后端传值
  • 3 年→ 资深开发速通计划 序言
  • AndroidManifest.xml文件的作用
  • VSCode轻松调试运行.Net 8.0 Web API项目
  • 前端TypeScript 面试题及参考答案
  • leetcode 214. 最短回文串
  • 本地部署语言大模型deepseek完整步骤