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

实时预览变更的页面

相关推荐
DarkBule_1 小时前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
进阶的小木桩2 小时前
Visual Studio Code配置自动规范代码格式
ide·vscode·编辑器
前端Hardy3 小时前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
前端Hardy3 小时前
HTML&CSS:必学!手把手教你实现动态天气图标
javascript·css·html
hljqfl3 小时前
pip安装第三方库,但PyCharm中却无法识别
ide·pycharm·pip
小妤妤9 小时前
webStorm 控制台失效,无法输入
ide·webstorm
EQ-雪梨蛋花汤11 小时前
【工具】在 Visual Studio 中使用 Dotfuscator 对“C# 类库(DLL)或应用程序(EXE)”进行混淆
数据库·ide·visual studio
一只月月鸟呀11 小时前
HTML中数字和字母不换行显示
前端·html·css3
萧寂17312 小时前
html实现手势密码
前端·css·html
watersink20 小时前
基于大模型的pc版语音对话问答
ide·macos·xcode