Sublime3结合Chrome使用LiveReload插件实现html页面实时预览

路飞
路飞
路飞
43
文章
13
评论
2019年9月23日11:10:00 评论 308 774字阅读2分34秒

在编写html代码的时候,时常需要切换窗口手动刷新页面来实时预览,有没有更加便捷的方法呢?今天我们介绍一种通过Sublime3结合Chrome浏览器插件的方式完成实时开发预览。

步骤如下:

  1. Sublime3安装LiveReload插件
  • 打开Sublime,按住ctrl+shift+p打开命令面板。
  • 输入install package打开插件管理器。
  • 搜索输入LiveReload,点击搜索结果进行安装。
  • 左下角查看安装状态,稍等片刻即可完成安装。
  • 安装完成
  1. 配置Sublime3的LiveReload插件

安装后的LiveReload插件需要配置其使用的模式,具体操作如下:

依次点击【Preference】>【Package Settings】>【LiveReload】 >【Settings User

查看配置:

除此之外,还有多种模式可供选择:

按住ctrl+shift+p打开命令面板,输入LiveReload: Enable/disable plugins

其中红色框处是上面配置中开启的选项,各位可以深挖LiveReload插件的高级使用模式,此处不赘述。

  1. 谷歌浏览器安装LiveReload扩展插件

插件下载地址:http://www.cnplugins.com/devtool/livereload/

  • 打开Chrome浏览器,点击右上角的【设置】>【扩展程序】,把下载好的LiveReload插件拖到谷歌浏览器里面。

  • 【启用】LiveReload插件并设置【允许访问文件网址】,此时在谷歌浏览器右上角多出一个圆形空心的小图标,如下图所示。

  • 至此谷歌浏览器LiveReload插件安装完成,打开需要预览的本地html网页,同时点击浏览器上的圆形空心小图标,此时空心变成实心,说明实时预览模式已经可用,之后修改本地的html、css、js代码,切换到谷歌浏览器就可以看到实时效果了。
weinxin
微信公众号
分享IT信息技术、北海生活的网站。提供北海本地化的信息技术服务。
路飞
  • 本文由 发表于 2019年9月23日11:10:00
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Tomcat增加管理账户 信息技术

Tomcat增加管理账户

默认情况下,Tomcat的管理功能是关闭的,如何开启? 使用文本编辑工具打开 ${TOMCAT_HOME}\conf\tomcat-users.xml 文件,在最下面可以看到Tomcat默认把用户以及...
Windows10扩展分区大小 信息技术

Windows10扩展分区大小

1       前言 由于应用程序的不断积累,导致系统盘的空间不断被消耗,如何扩展其空间的大小呢? 通过Windows 10的磁盘管理可以轻松完成这项任务,假设要扩展C盘,那么需要将与C盘相连的分区删...
Java库之Lombok的妙用 JAVA编程

Java库之Lombok的妙用

Lombok是目前比较流行的Java库,Lombok能以简单的注解形式来简化Java代码,提高开发人员的开发效率,免去额外的getter或equals等方法,降低由于修改引起的维护成本,Lombok在...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: