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

实时预览变更的页面

相关推荐
anOnion14 小时前
构建无障碍组件之Alert Dialog Pattern
前端·html·交互设计
一个懒人懒人16 小时前
Promise async/await与fetch的概念
前端·javascript·html
LYOBOYI12316 小时前
vscode界面美化
ide·vscode·编辑器
骥龙1 天前
第六篇:AI平台篇 - 从Jupyter Notebook到生产级模型服务
ide·人工智能·jupyter
晚烛1 天前
CANN + 物理信息神经网络(PINNs):求解偏微分方程的新范式
javascript·人工智能·flutter·html·零售
kun200310291 天前
如何用Obsidian+VSCode生成文案排版并发布到公众号
ide·vscode·编辑器
ۓ明哲ڪ1 天前
网页视频倍速播放.
html
觉醒大王2 天前
哪些文章会被我拒稿?
论文阅读·笔记·深度学习·考研·自然语言处理·html·学习方法
Never_Satisfied2 天前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
夏幻灵2 天前
HTML5里最常用的十大标签
前端·html·html5