文件保存后自动刷新浏览器页面

Shawphy — Sun, 28 Feb 2010 15:44:37 +0000

做前端的就是苦命，前端的键盘最苦命的是F5按键。
每次修改了点页面，写了点代码就要按F5去测试，着实让人崩溃。
除非用DreamWeaver这种工具，或者TopStyle这种，否则就免不了受罪。
这也归罪于微软各个GUI直接通信不良……

今天找到个方案，这位达人写了一个Firefox小扩展，用于修改js和host文件的时候用。
原理请参考上面的链接，我就拿来改了一改

敲击这里下载

注意：这个工具只是一个很原始的模型！！

怎么用呢？

很简单，在Firefox，打开你所要的页面，这个扩展会不停检测 D:\refresh.firefox 文件，
如果存在这个文件，他就会自动刷新当前页面并删除这个文件。

那么如何创建这个文件呢？

For VIM

如果你是用VIM的，在$MYVIMRC中加入这句话

function! b:AutoRefresh()
!start cmd /c echo x > d:\\refresh.firefox
syntax on
endfunction
autocmd BufWritePost,FileWritePost *.html :call b:AutoRefresh()

其中 syntax on 这句是为了可以不会出现一个等待键盘确认的事件。我是参考这里的
这就让html文件保存的时候生成d:\refresh.firefox文件了

For Editplus

如果你像我一样是Editplus用户的话，也很容易。如图

设置Auto Run: After Save里的，添加命令就行了。

cmd /c echo x >d:\refresh.firefox

只不过还是有点后遗症，随便什么文件保存它都会生成……
作为一个不开源，没有插件体系，更新也很不勤快的编辑器……要求也不要太高了……
友情提醒：请使用正版软件~可以在有能力的时候购买许可，或者转用其他开源编辑器，比如Notepad++等。不要让使用盗版成为国内软件开发人员的原罪……

For Others

基本原理都知道了，应该不难办了吧？

系统资源占用

实测下来，我E7200，CPU占用率不到1%。这个setInterval还是很节约资源的。

带来的好处

仔细想的话，节约的不只一步。你要切换窗口，要按f5，看效果，再切换回来继续调整。但如果你是宽屏或者是编辑器背景透明的话，无需切换就可以完成了。节约的是大把时间。如果是虚拟机或者其他电脑测试的情况下，也可以用局域网共享实现，非常好用。其他浏览器只要提供访问文件的接口，也可以如法炮制。

FireUnit:基于Firebug的JavaScript单元测试扩展

Shawphy — Thu, 18 Dec 2008 08:43:15 +0000

John Resig最近在他的博客中发表文章John Resig – FireUnit: JavaScript Unit Testing Extension.发布了他与Jan Odvarko合作开发的一款基于Firebug的扩展FireUnit。(Firebug真是越来越强大了……)
简单说来，FireUnit给Firebug增加了一个标签面板，并提供了一些简单的JavaScript API来记录和查看测试。
举例来说：

// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );
// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
"The lazy fox jumped over the log.",
"The lazy brown fox jumped the log.",
"Are these two strings the same?"
);
// Compare a string using a regular expression
fireunit.reCompare(
/The .* fox jumped the log./,
"The lazy brown fox jumped the log.",
"Compare a string using a RegExp."
);
// Display the total results
fireunit.testDone();

就可以在Firebug中的Test标签面板中看到下图：

FireUnit还可以模拟触发原生浏览器事件：

// You can also simulate browser events
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );

此外，可以批量测试文件（每个文件都含有一些独立测试）

// Or run multiple pages of tests:
fireunit.runTests("test2.html", "test3.html");
// Place at the end of every test file in order to continue
fireunit.testDone();

推荐把测试代码包含在下面的if语句内

if ( typeof fireunit === "object" ) {
//Your code for test
}

如果感兴趣，可以访问Fireunit.org下载并测试（这个网站内就包含了测试代码，安装后即可看到第一张图的内容）
可以在Github上获取源码，得用git而不是svn
Jan也写了一篇文章，可以看看。

走走停停看看 » Firefox