XRefresh - 好用的網站開發輔助工具

先前介紹過 LiveReload 這個好用的工具，不過在 Windows 安裝上得花一番功夫；剛好網友阿育推薦了一個類似的工具： XRefresh ，試用了一下還不錯，以下就簡單為大家介紹這個好用的工具。

安裝 XRefresh 監控程式

XRefresh 支援了 Windows 、 Mac OS X 及 Unix-like 等平台，而 Windows 平台的 XRefresh 還提供了 GUI 介面及常駐程式，就方便度來說大勝其他平台。

首先下載 XRefresh 的 Windows Monitor 程式，接著開啟它，並按照畫面指示進行安裝即可。

安裝 Browser Extension/Add-on

安裝好 XRefresh 的 Windows Monitor 後，預設也會安裝好 Internet Explorer 的 XRefresh 附加元件。

而 Firefox 的使用者請先安裝好 Firebug 套件，然後下載對應的 XRefresh Addon 安裝即可。

使用 XRefresh

設定 XRefresh

第一次開啟 XRefresh 的監控程式時，可能會出現以下畫面：

這表示我們需要先行設定相關選項。按下「是」之後，就會出現以下畫面：

請取消勾選「 Save settings to default location 」，並指定 Settings file 至「 C:\Users\<yourname>\XRefresh\settings.xml 」 (這裡是以 Windows 7 為例。)

註：要將 settings.xml 存到當前使用者有權限存取的路徑，否則會出現 settings.xml 無法存取的錯誤訊息。

新增監控路徑

接下來在 XRefresh 的 GUI 主視窗中，我們可以按下「 Add Folder … 」來新增要監控的專案路徑：

新增後， XRrefresh 會自動判別這個路徑可能是何種類型的專案 (例如 PHP / Python / RoR 等等) ，而無法判斷時則會顯示 Generic 型態。因為 XRefresh 能同時幫我們處理多個專案，所以這裡也可以新增多組要監控的專案路徑。

註：基本上不需要去更動專案的型態，而且不知道什麼原因，我試著去改變專案型態的結果會導致 XRefresh 強制結束。

按下「 Apply 」鈕後， XRefresh 就會跳到背景去執行。

測試 XRefresh

假設我們監控的路徑是 D:\Web\wwwroot\xrefresh-test ，其下有 index.html 及 css/style.css 這兩個檔案：

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>LiveReload Test</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="navbar">TODO write content</div>
    </body>
</html>

style.css

body {
background: #300;
color: #FFF;
}

另外假設該路徑對應的測試網址是 http://localhost/xrefresh-test ，我們用 Firefox 瀏覽該網址，應該就會看到 XRefresh 常駐程式的圖示由灰色轉為彩色，並顯示 Firefox 已連線：

接著試著修改 css/style.css 的 body background 屬性值並存檔，應該就會發現 Firefox 呈現的網頁會跟著變化。

要查看 XRefresh 的監控狀態，可以直接從 Firebug 的 XRefresh 面板查看：

至於 IE9 目前似乎沒辦法呈現出監控狀態， XRefresh 僅能開啟以下設定視窗：

以下為官方以 IE7 示範的畫面：

工具列圖示：

記錄視窗：

希望這個簡單的介紹，能讓大家瞭解這類型工具的優點，也可以讓大家在工作上更為輕鬆。

網站製作學習誌

記錄學習製作網站的一切