XRefresh – 網頁開發解放F5

阿育 — Sat, 06 Mar 2010 12:27:46 +0000

在寫網頁的時候通常我們經常需要在編輯器與瀏覽器切換，這種情況特別容易發生在寫CSS及Javascript時，就算是使用的是視覺化的編輯器，例如Dreamweaver，也難以避免來回切換瀏覽器的來檢視最正確的結果，而且不僅需要來回切換檢視甚至還得不斷按F5重新整理網頁，長久下來這是一件非常費力的工作，XRefresh 便是解決這種困擾的工具。

運作方式

它的運作方式為透過安裝一個常駐於系統列的監視器，監視我們所設定的目錄及檔案，當檔案發生變動的時候，它會將資訊傳達給安裝於瀏覽器中的插件進行自動重新整理網頁的動作，而目前 XRefresh 提供Firefox及IE的插件。

以下是官方提供的運作示意圖：

via http://xrefresh.binaryage.com/

在 Windwos 上使用 XRefresh

首先必須安裝 XRefresh Monitor for Windows 這個安裝程式會自動安裝IE的插件（XRefresh Monitor 是以 .Net Framework開發的，請先確定系統中已經安裝.Net Framework）。
如果是Frirefox則必須安裝 Firebug 1.4 或更高版本，並且安裝 XRefresh for Firefox Addon。

安裝完畢後啟動 Xrefresh 將會出現在系統列中：

接著按下Tryicon選單的Configuration，進行目錄監視設定：

以上圖的設定來說，我設定了監視D:\xrefresh_test\ 裡面的所有 Javascript的檔案

假設在那個目錄裡面有 index.html 裡面引入了 test.js，現在就可以使用Firefox 打開 index.html並於該分頁啟用Firebug，且將Xrefresh啟用：

現在只要我一更動test.js並儲存的話，那個分頁就會自動重新整理了，甚至如同官方所給的示意圖，裝上雙螢幕的話連切換都不必了，這樣是不是很方便、很有效率呢？

如果不想要重新整理整個頁面，還可以啟用「Use Soft Refresh for CSS」及「Use Soft Refresh for JS」讓XRefresh只重新載入CSS或JS而不是整個頁面重新載入。

至於IE的話概念上大同小異，有興趣的話可以觀看官方的介紹。

PS.XRefresh 支援 Windows 及 OSX。

相關連結

XRefresh 官方網站

色胚子部落 » firefox

XRefresh – 網頁開發解放F5

運作方式

在 Windwos 上使用 XRefresh