免刷神器

最近在 寸老师的博客 上发现了一个很简单但是很实用的小工具:F5

F5 是什么呢?

简单的来说就是:在你保存或者编译网站之后,可以帮你自动刷新浏览器上的页面。

特性:

  1. 保存或编译时才刷新,而不是强制每过一段时间刷新一次
  2. 不限浏览器
  3. 不限开发语言:纯 html+js,asp.net,jsp 都可以

 

实现原理

想了一下实现原理,其实非常简单。

这里一共分三个部分:浏览器、F5、被监视的目录

F5 会监视着你指定的目录,如果你的开发工具保存了或者编译了,输出目录里的文件必定会发生变化;

浏览器上的页面会和 F5 保持通讯,如果发现被监视的目录文件有变动,就会主动刷新一下页面。

很简单的原理,但是却大大提升了生产力!

 

静态网站使用方式

如果你是一位前端工程师的话,如果你拥有双屏的话,你一定会苦于每次手动刷新页面对吧?

先要切换到另一个屏幕,然后还要按 F5 ,或者手动点刷新…

有了 F5 就简单了,打开 F5,把你的开发目录拖到 F5 中,接下来你每次保存的时候,F5 就会自动帮你刷新浏览器上的页面了。

再也不用手动刷新了,再也不用靠插件定时刷新了!

 

动态网站使用方式

动态网站使用起来会多几个步骤。

 

首先找到你网站的发布目录

如果你是 eclipse + tomcat 的话,找到如下目录:workspace.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\

你的网站会在这个目录下,每次发布的时候就会发布到这个目录中,当然特殊环境需要特殊配置。

 

如果你是 asp.net 的话,你可以直接监视你的 Web Project 所在的目录。里面往往会包含了很多页面和一个 bin 目录,这个 bin 目录中会包含着其他项目编译后的 dll。

所以无论你是修改了页面,或者是重新编译了一下整个 Solution,你的 Web Project 所在的目录里的文件必定会有所变化。

那有必要监视整个 Solution 吗?明显没必要啦,因为你修改了别的项目中的代码,不编译的话,Web Project 也不会有变化,这时候就算刷新了也是白刷,所以不建议监视整个 Solution。

 

另外如果你是别的开发语言,同样的思路,监视你的发布目录就行了。

 

在你的页面中加入一段 js

先把 F5 切换到动态网站模式

f5

然后下面会出现一段 js,只要把这段 js 加入你的网站中就 OK 了!

 

演示视频

最后贴上一段官方的演示视频

下载地址:http://www.getf5.com/

授权方式:免费版每过10分钟会在页面上弹出一个提示,可以忍受。

本作品由 Dozer 创作,采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。