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

实时预览变更的页面

相关推荐
richdata8 小时前
动态OTB vs 静态OTB:鞋服零售该选哪种管理模式?
前端·html·零售
csdn_aspnet11 小时前
Copilot能换成本地吗?VSCode接本地大模型本地化接入方案
ide·vscode·ai·ollama
大数据专业的小沉13 小时前
解决PyCharm 2024.1 打开项目后持续卡顿,UI 无响应,编辑延迟明显
ide·python·pycharm
FungLeo14 小时前
Flutter Web 中文字体困境与渲染器选择:CanvasKit vs HTML renderer 实战
前端·flutter·html
3A Cloud16 小时前
从王虹的手写报告到可运行的 HTML 幻灯片:拆解 z-wanghong-handwritten-ppt
前端·人工智能·笔记·信息可视化·html·powerpoint·ppt
IMPYLH17 小时前
HTML 的 <embed> 元素
前端·数据库·html
必须会一定会17 小时前
用纯 HTML/JS 做一个 AI 需求澄清器:把模糊想法转换成可执行任务书
开发语言·前端·javascript·人工智能·html·ai编程
00后程序员张17 小时前
有没有更轻量的 iOS 开发环境?快蝎kxapp轻量化路径与构成
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
猿小猴子1 天前
主流 Agent 之 「Zed」和 「ZCode」 介绍
ide·ai·agent·zed·zhipu·ade·zcode
2401_881828322 天前
简易文本处理网页工具|AI 通识课第三次作业
前端·javascript·html