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

实时预览变更的页面

相关推荐
小叮当⇔2 小时前
PYcharm——获取天气
ide·python·pycharm
tianyuanwo2 小时前
VSCode高效使用完全指南:提升开发效率的系统化实践
ide·vscode·编辑器
CoderYanger3 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio3 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking113 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI3 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
小蕾Java3 小时前
PyCharm 2025:最新使用图文教程!
ide·python·pycharm
高山上有一只小老虎5 小时前
idea中设置快捷键风格
java·ide·intellij-idea
我有一棵树6 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex