Skip to content

rehorn/chrome-live-reload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 窗口进行左右分栏

About

It's a chrome extension to help web developers auto refreshing pages(html,css) with press F5

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published