导航
导航
文章目录󰁋
  1. sublime配置LiveReload插件实现实时预览
  2. WebStorm Live Edit与Google浏览器实时无刷新自动加载页面

关注作者公众号

和万千小伙伴一起学习

公众号:前端进价之旅

配置sublime的LiveReload与webstorm的插件实现实时预览

sublime配置LiveReload插件实现实时预览

LiveReload是很棒的插件,可以在浏览器中实时预览,但是在Sublime text3里,从Package Control中安装的LiveReload是无法使用的,但是可以选择手动安装解决

  • Sublime端

直接clonePackages文件夹

git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload
  • 浏览器端

用的是chrome,在应用商店可以直接找到LiveReload,安装

  • 配置

打开sublime

Preference>Package Settings>LiveReload>Settings User

{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
  • 实时预览

html文件在浏览器中打开,点击一次图标中间的圆环变成原点就代表可以实时预览了。ST3中的文件保存一次,浏览器就会刷新一次,实时预览,很方便

  • sublime配上美美的透明插件,是不是很酷呢,再也不用来回切换了

  • 透明插件:SublimeTextTrans


WebStorm Live Edit与Google浏览器实时无刷新自动加载页面

  • WebStorm中是自带Live Edit功能的,只是默认没有开启

  • Ctrl + Alt + S –> Live Edit–> 勾选Enable live editing,如下图:

  • 接下来就是要在Google浏览器中安装 JetBrains IDE Suport扩展,这里直接给出地址啦

  • JetBrains IDE Suport

  • 安装好之后在地址栏的右边会有一个JB的小图标

  • 如果单击这个小图标可以切换到WebStorm的页面中

  • 最后,要实现在WebStorm中编辑代码,而不刷新浏览器自动实时更新,需要在WebStorm中开启Debug模式打开页面,直接在Project面板右击页面选择Debug就行啦

  • 一切OK,现在在WebStorm修改,然后切换到chrome查看一下,是不是已经同步过来啦;浏览器上面的黄色背景提示条一定不能关闭,关闭了就不会实时同步啦
支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫