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

实时预览变更的页面

相关推荐
然我26 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
lls2333 小时前
恢复idea文件目录
ide
NeRF_er4 小时前
使用 VScode Debug加不上断点的原因
ide·vscode·编辑器
GHL2842710905 小时前
error MSB8041: 此项目需要 MFC 库。从 Visual Studio 安装程序(单个组件选项卡)为正在使用的任何工具集和体系结构安装它们。
ide·visual studio
veminhe5 小时前
html怎么设置html5
html·html5
AA-代码批发V哥6 小时前
HTML之表单结构全解析
前端·html
weixin-a1530030831615 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
孤水寒月19 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
海的诗篇_20 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html