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

实时预览变更的页面

相关推荐
CodeCraft Studio13 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
Kiri霧14 小时前
IntelliJ IDEA
java·ide·kotlin·intellij-idea
冰菓Neko14 小时前
HTML 常用标签速查表
前端·html
晨风先生16 小时前
如何Visual Studio 的配置从 Qt-Debug 切换到 x64-Debug
ide·qt·visual studio
要加油哦~19 小时前
工具 | 解决 VSCode 中的 Delete CR 问题
ide·vscode·编辑器
qq_三哥啊19 小时前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
未来之窗软件服务1 天前
基于 Nginx 与未来之窗防火墙构建下一代自建动态网络防护体系—仙盟创梦IDE
网络·ide·nginx·服务器安全·仙盟创梦ide·东方仙盟
Dxy12393102161 天前
Python HTML模块详解:从基础到实战
开发语言·python·html
yao000371 天前
Claude 4.0 终极编程指南:模型对比、API配置与IDE集成实战
ide·ai编程
我有一只肥螳螂1 天前
idea监控本地堆栈
java·ide·intellij-idea