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

2019年9月23日11:10:00 发表评论 58

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

步骤如下:

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

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

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

查看配置:

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

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

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

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

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

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

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

  • 打开Chrome浏览器,点击右上角的【设置】>【扩展程序】,把下载好的LiveReload插件拖到谷歌浏览器里面。
    Sublime3结合Chrome使用LiveReload插件实现html页面实时预览
  • 【启用】LiveReload插件并设置【允许访问文件网址】,此时在谷歌浏览器右上角多出一个圆形空心的小图标,如下图所示。
    Sublime3结合Chrome使用LiveReload插件实现html页面实时预览
  • 至此谷歌浏览器LiveReload插件安装完成,打开需要预览的本地html网页,同时点击浏览器上的圆形空心小图标,此时空心变成实心,说明实时预览模式已经可用,之后修改本地的html、css、js代码,切换到谷歌浏览器就可以看到实时效果了。
weinxin
微信公众号
分享IT信息技术、北海生活的网站。提供北海本地化的信息技术服务。
路飞

发表评论

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