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

实时预览变更的页面

相关推荐
合作小小程序员小小店10 小时前
web网页开发,在线%商城,电商,商品购买%系统demo,基于vscode,apache,html,css,jquery,php,mysql数据库
开发语言·前端·数据库·mysql·html·php·电商
顾安r10 小时前
11.8 脚本网页 塔防游戏
服务器·前端·javascript·游戏·html
座山雕~21 小时前
html 和css基础常用的标签和样式
前端·css·html
这儿有一堆花1 天前
IDE 开发的一天
ide
swear011 天前
VSCODE 插件 rust-analyzer 使用遇到的问题 快捷键查看定义
ide·vscode·rust
pengzhuofan1 天前
IntelliJ IDEA 常用快捷键
java·ide·intellij-idea
Larcher1 天前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
Jackson@ML1 天前
用Visual Studio Code最新版开发C#应用程序
ide·vscode·c#
小月鸭1 天前
如何理解HTML语义化
前端·html
sonrisa_1 天前
下载CUDA Toolkit和VS后,配置vscode
ide·vscode·编辑器