Skip to content
It's a chrome extension to help web developers auto refreshing pages(html,css) with press F5
JavaScript
Find file
Latest commit 387e458 Apr 29, 2012 @rehorn add ga
Failed to load latest commit information.
build add ga Apr 29, 2012
demo add ga Apr 29, 2012
res add ga Apr 29, 2012
src add ga Apr 29, 2012
live-reload-0.2.1.crx add ga Apr 29, 2012
live-reload.pem add ga Apr 29, 2012
readme.md add ga Apr 29, 2012

readme.md

Live Reload 介绍:

Live Reload 是一个旨在提高web前端开发者开发效率的chrome扩展。它可以在你编辑页面资源(html,js,css)的时候,自动获取最新的文件并重新载入,避免开发过程需要频繁按 F5 页面的烦恼。特别适合在双屏环境下进行 web 前端开发,使你不必在编辑器和浏览器之间不停的切换,提高工作效率。

特性:

  • 只需要安装一个 chrome 插件,不需要特殊的服务器端支持
  • 启用实时更新模式后,能够自动重新载入 html/js/css 等资源更新
  • 不启用实时更新模式,也能够通过按 F9 来手动重新载入 css 文件
  • 支持本域和跨域资源的实时更新,可以通过配置项只监控本域资源更新
  • 支持重新载入页面的时候,保留页面滚动条位置
  • 页面的资源支持相对路径,绝对路径
  • 可以通过 F8 来启用【显示页面节点 id,class 信息】功能,便于开发过程中在编辑器快速定位
  • 提供启用Live Reload的页面管理界面
  • 能够通过配置选择监控的资源类型和频率

配置项说明:

  • 启用 Live Reload 的资源类型【css/js/html】:可以选择只实时更新某一类型的资源
  • 保持滚动条位置:重新载入页面的保留滚动条位置
  • F8显示 Dom#Id.Class :在实时模式/手动模式下,都可以通过按 F8 来显示页面节点 id 和 class 信息
  • F9刷新 CSS:是否启动按 F9 手动载入 CSS 更新
  • 只监控本站点资源:是否忽略非本域资源,只监控本域资源更新
  • 刷新频率:定时从服务器更新资源的频率

暂不支持:

  • 由于 chrome 安全机制,暂不支持通过 file:// 打开的页面
  • 不支持页面中的 iframe 内资源的变化
  • 无法监控 CSS 中使用 import 引入其它 CSS 的情况

使用方法:

  • 先安装 Live Reload 扩展,可以通过 chrome store 安装,也可以下载后拖入浏览器手动安装
  • 安装后扩展栏会出现一个 Live Reload 图标
  • 把正在开发的页面资源部署一个 Web 服务器上
    • 可以选择在本机架构 Apache/Nginx/IIS/Tomcat 等专业服务器
    • 如有 Python 运行环境,可以通过在页面根目录执行 python -m SimpleHTTPServer 8999 快速架构服务器
    • 可以选择配合 Fiddler/Rythem 等本地替换工具进行开发
  • 在 chrome 地址栏内输入页面地址,可以通过点击 Live Reload 图标,来启用实时监控模式
  • 在你最喜欢的编辑器中修改页面资源内容后,可以看到页面上已经更新
  • 可以再次点击 Live Reload 图标,图标变灰,不启用实时监控模式
  • 可以通过按 F8 来启用/隐藏(F8/ESC)【显示页面节点 id,class 信息】功能,便于开发过程中在编辑器快速定位
  • 可以通过按 F9 来手动更新页面 CSS 资源
  • 可以在 Live Reload 图标右击,选择选项,可以在配置页面上面设置相关参数
  • 设备允许的情况下,推荐使用双显示器进行工作,将 chrome 放在副屏幕,代码编辑器在主屏幕,编辑后可以预览效果
  • 设备不允许,可以选择使用小工具将 chrome 窗口置顶或者将编辑器和 chrome 窗口进行左右分栏
Something went wrong with that request. Please try again.