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

实时预览变更的页面

相关推荐
周末也要写八哥4 小时前
html网页设计适合新手的学习路线总结
html
萌萌站起4 小时前
Vscode 中 python模块的导入问题
ide·vscode·python
ZC跨境爬虫4 小时前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝4 小时前
svg图片
前端·css·学习·html·css3
王夏奇5 小时前
pycharm中3种不同类型的python文件
ide·python·pycharm
ShawnLiaoking6 小时前
pycharm 上传更新代码
ide·elasticsearch·pycharm
Freak嵌入式9 小时前
MicroPython LVGL基础知识和概念:GUI 的扩展接口
ide·驱动开发·嵌入式·gui·lvgl·micropython·upypi
阿捞212 小时前
Inertia.js 持久布局实现原理
前端·javascript·html
无限进步_13 小时前
【C++】重载、重写和重定义的区别详解
c语言·开发语言·c++·ide·windows·git·github
ZXF_H14 小时前
VSCode C/C++函数Ctrl+鼠标点击无法跳转的解决方法
c++·ide·vscode