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

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

步骤如下：

1. Sublime3安装LiveReload插件

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

2. 配置Sublime3的LiveReload插件

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

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

查看配置：

除此之外，还有多种模式可供选择：

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

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

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

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

• 打开Chrome浏览器，点击右上角的【设置】>【扩展程序】，把下载好的LiveReload插件拖到谷歌浏览器里面。
  
  
• 【启用】LiveReload插件并设置【允许访问文件网址】，此时在谷歌浏览器右上角多出一个圆形空心的小图标，如下图所示。
  
  
• 至此谷歌浏览器LiveReload插件安装完成，打开需要预览的本地html网页，同时点击浏览器上的圆形空心小图标，此时空心变成实心，说明实时预览模式已经可用，之后修改本地的html、css、js代码，切换到谷歌浏览器就可以看到实时效果了。