Sublime3和Chrome配置自动刷新网页【实测可用】

时间:2024-07-21 20:35:38

SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法。win7下实测可用!

安装成功后,就不需要再手动去F5刷新页面了,修改完代码Ctrl+S,浏览器自动刷新,如果是双屏,效率提升还是比较明显的。

工具

  • Chrome
  • Sublime Text 3
  • Git

Chrome安装LiveReload

在Chrome插件中心搜索"reload"并安装,(https://chrome.google.com/webstore/search/reload?hl=zh-CN),

成功后可以看到地址栏右边多了一个LiveReload图标(装google插件,记得翻个墙)

Sublime3和Chrome配置自动刷新网页【实测可用】

Sublime3 安装LiveReload

Sublime3中,直接PackageControl里下载来的LiveReload没有效果,可以手动从git上下载。

1、打开“Sublime Text 3”点击菜单栏Preferences->Browse Packages...打开插件安装目录;

2、在插件安装目录下右击鼠标选择“Git Bash Here...”,打开git bash;

Sublime3和Chrome配置自动刷新网页【实测可用】

Sublime3和Chrome配置自动刷新网页【实测可用】

3、安装LiveReload插件,在命令行下输入

git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload

Sublime3和Chrome配置自动刷新网页【实测可用】

4、使用:Ctrl+Shift+P 打开ControlPackage

5、选LiveReload: Enable/disable plug-ins

6、选Enable - SimpleReload

如果不行,就在sublime text3 配置LiveReload。preferences -> Packge Settings -> LiveReload -> Settings - Default

Sublime3和Chrome配置自动刷新网页【实测可用】

{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}

实时预览

1、在web服务器下编辑index.html文件输入如图内容,在浏览器中输入http://localhost访问文件;

2、然后点击 Chrome浏览器右边的“LiveReload”图标中间小圆点由虚变实,表示启动插件;

3、修改index.html文件内容按 ctr+s 保存,即可在chrome里面看到实时更新。

Sublime3和Chrome配置自动刷新网页【实测可用】

其他

如果之后打开sublime出现错误提示框,请看 http://blog.****.net/yaerfeng/article/details/9198213

自动刷新网页的其他方法:

webstorm有liveedit插件可以;(IDE)

brackets也有实时刷新功能;(IDE)

引入live.js可以,但是之后要手动去清除;