簡介
如果您是指定跨裝置網站的網站開發人員，可能必須透過多種不同的裝置和設定來測試網站和網頁應用程式。同步測試可以在這方面派上用場，而且可讓多個裝置和瀏覽器同時自動執行相同的互動。
同步測試可協助解決兩個特別耗時的問題：
- 讓所有裝置與要測試的網址保持同步。在每部裝置上手動載入這些項目，昨天會花上較長時間，而且讓您更容易錯過迴歸。
- 同步處理互動。載入網頁是進行視覺測試的絕佳方式，但針對互動測試，您最好也能夠同步處理捲動、點擊和其他行為。
幸好您可以存取某些目標裝置，因此有許多工具旨在改善從電腦到行動裝置的流程。在本文中，我們將探討 Ghostlab、Remote Preview、Adobe Edge Inspect 和 Grunt。
工具
GhostLab (Mac)
Ghostlab 是商用 Mac 應用程式 ($49 美元)，專門用於在多部裝置上同步測試網站和網頁應用程式。最低設定可讓同時進行同步：
- 點擊
- 瀏覽
- 捲動
- 表單輸入內容 (例如登入表單、註冊)
因此在多部裝置上測試網站端對端使用者體驗的步驟非常簡單。在裝置上使用瀏覽器開啟網頁後，您對瀏覽方式所做的任何變更 (包括重新整理) 都會立即重新整理，Ghostlab 支援監控本機目錄，因此儲存本機檔案的編輯內容時，也會發生這項重新整理作業，讓所有資料保持同步！
我發現設定 Ghostlab 非常簡單，如要開始使用，請先下載、安裝並執行試用 (如果您正在購買的情況下，請安裝並執行完整版本)。然後，建議您將 Mac 和要測試的裝置連線至同一個 Wi-Fi 網路，這樣使用者就能探索這些裝置。
執行 Ghostlab 後，您可以按一下「+」新增測試網址，或是從瀏覽器的網址列拖曳網址。或者，您也可以將要測試的本機資料夾拖曳至主視窗中，然後建立新的網站項目。我正在測試 http://html5rocks.com 的上線版本。Cheky，什麼？；)
接著，您可以按一下網站名稱旁的「>」播放按鈕，啟動新的 Ghostlab 伺服器。這會啟動新的伺服器，該伺服器可透過您網路專屬的 IP 位址取得 (例如 http://192.168.21.43:8080)。
我在這裡已連接 Nexus 4，並將 Android 版 Chrome 指向 Ghostlab 提供的 IP 位址。就是這麼簡單。Ghostlab 不需要像其他解決方案一樣 為每部裝置安裝專屬用戶端，就能更快開始測試
系統會將所有連接至 Ghostlab 網址的裝置加入已連線用戶端清單，加入 Ghostlab 主要視窗右側的側欄中。在裝置名稱上按兩下，即可顯示其他詳細資料，例如螢幕大小、OS 等。現在您應該可以測試導覽和同步點擊了！耶。
Ghostlab 也可以顯示有關已連結裝置的部分統計資料，例如通用 Analytics (分析) 字串、可視區域寬度和高度、裝置像素密度、顯示比例等等。您隨時可以點選項目旁的設定齒輪圖示，手動變更要檢查的基準網址。系統隨即會開啟設定視窗，如下所示：
這樣我就可以選取一部其他已連線的裝置、按一下 HTML5Rocks 周圍的不同連結，讓電腦版 Chrome (也就是我輸入同一個 Ghostlab 網址) 和所有裝置的瀏覽設定保持同步。
更棒的是，Ghostlab 可以選擇透過 Proxy 將所有通過網路的連結轉譯為 www.htm.1.，如此一來，就不用點選 http://192.168.21.43:8080/www.html5rocks.com (例如前往 www.html5rocks.com/en/performance) 點擊連結，就能將所有 http://www.html.htm 解決方案轉換為 3.htm。1.htmhttp://192.168.21.43/www.htm5rocks.com/en/performance
如要啟用，請勾選「Content 正在載入」分頁底下的「透過 Ghostlab 載入所有內容」。
看看實際運作情形：
Ghostlab 可以在任何支援的瀏覽器中載入任意數量的網站或視窗。這不僅可讓您測試不同解析度的網站，也知道程式碼在不同瀏覽器和平台上的運作方式。！
Ghostlab 可讓您設定要預覽的專案工作區設定，也可以指定是否要在偵測到目錄時進行變更，以便查看及重新整理目錄。這表示變更會導致所有已連線的用戶端重新整理。不必再手動重新整理了！
您可能會好奇 Ghostlab 還能提供哪些協助。雖然這絕對不是瑞士軍刀，但它也支援在連線裝置上檢查遠端程式碼的功能。使用主要介面時，在任何裝置名稱上按兩下應該會顯示「偵錯」選項，這樣就能啟動一個版本的 Chrome 開發人員工具，供您隨意嘗試。
Ghostlab 可透過隨附的 Weinre 遠端網頁檢查器，為連線裝置上的指令碼偵錯及調整樣式。與適用於 Android 的遠端偵錯體驗類似，您可以選取元素、執行一些效能分析及偵錯指令碼。
總而言之，我對每天使用 Ghostlab 的裝置測試速度感到驚豔。如果您是自由工作者，可能會發現商業授權的費用稍微高昂 (詳情請參閱下方說明)。不過，我還是很樂意推薦 Ghostlab。
Adobe Edge 檢查 CC (Mac、Windows)
Adobe Edge Inspect 是 Adobe Creative Cloud 訂閱套件的一部分，但也提供免費試用。您可以透過 Edge Inspector Chrome 擴充功能 (透過 Edge Inspector Chrome 擴充功能) 驅動多部 iOS 和 Android 裝置，如此一來，當您瀏覽特定網址時，所有已連結的裝置都會保持同步。
如要進行設定，請先註冊 Adobe Creative Cloud 帳戶或登入現有帳戶 (如有)。接著，前往 Adobe.com 下載並安裝 Edge Inspect (目前適用於 Mac 和 Windows，但不支援 Linux)。請留意，Edge Inspect 的docs非常實用。
安裝完成後，您可以取得 Chrome 的 Edge 檢查擴充功能，以便同步處理已連線裝置之間的瀏覽資料。
您也必須在要同步處理動作的每部裝置上安裝 Edge Inspect 用戶端。幸好的用戶端支援 iOS、Android 和 Kindle。
透過後端的安裝程序，我們現在可以開始檢查網頁。 請務必確認所有裝置都連線至相同的網路，這項功能才能正常運作。
在電腦上啟動 Edge Inspect，Chrome 的 Edge Inspect 擴充功能，然後再在裝置上啟動該應用程式 (請見下方說明)：
現在可以在電腦上瀏覽 HTML5Rocks.com 這類網站，我們的行動裝置就會自動前往同一個網頁。
現在擴充功能中也會顯示您的裝置，旁邊會有 <> 符號，如以下螢幕擷取畫面所示。只要按一下這個選項，系統就會啟動 Weinre 執行個體，方便您檢查網頁並進行偵錯。
Weinre 是 DOM 檢視器和主控台，但缺少 JavaScript 偵錯、剖析和網路刊登序列等 Chrome 開發人員工具的功能。雖然這是開發人員工具的基本要求，但很適合用來檢查 DOM 和 JavaScript 狀態。
邊緣檢查擴充功能也可輕鬆從已連結的裝置產生螢幕截圖。這項工具適用於測試版面配置，或是只擷取你的網頁來與其他人分享。
對於已經支付 CC 費用的開發人員，Edge Inspect 是絕佳的解決方案。但是，它會有一些注意事項，例如每部裝置都需要安裝專用用戶端，以及使用 Ghostlab 之類的替代方案，可能無法找到某些額外的設定工作。
遠端預覽 (Mac、Windows、Linux)
遠端預覽是一項開放原始碼工具，您可以在其中代管 HTML 網頁和內容，並顯示在多部裝置上。
遠端預覽會以每 1100 毫秒的間隔執行 XHR 呼叫，檢查設定檔中的網址是否變更。如果找到該屬性，指令碼會更新每個裝置載入至網頁的 iframe 的 src 屬性，將頁面載入其中。如果未偵測到任何變更，指令碼會繼續輪詢，直到變更為止。
這種方法很適合用來連結裝置，以及輕鬆變更所有裝置的網址。做法如下：
- 下載遠端預覽，然後將所有檔案的所有檔案移至可在本機存取的伺服器。例如 Dropbox、開發伺服器等
- 在您的所有目標裝置上，從這個下載內容中載入「index.html」。這個頁面將做為驅動程式使用，並會以 iframe 載入要測試的網頁。
- 使用您要預覽的網址編輯「url.txt」(包含在下載項目中，現在於伺服器上提供)。儲存這個檔案。
- 遠端預覽會發現 url.txt 檔案已變更，並會重新整理所有已連結的裝置以載入網址。
遠端預覽是 Lo-Fi 解決方案的一款免費工具，而且完全免費。
Grunt + 即時重新載入 (Mac、Windows、Linux)
Grunt (和 Yeoman) 是指令列工具，用於在前端上建立鷹架和建構專案。如果您已開始使用這些工具，且已做好準備，則可輕鬆更新工作流程，啟用跨裝置測試功能，如此一來，您在編輯編輯器中所做的每項變更都會導致任何已開啟本機應用程式的裝置重新載入。
您可能使用過「grunt server」。從專案的根目錄執行時，它會監控來源檔案的所有變更，並自動重新整理瀏覽器視窗。這都要歸功於我們在伺服器中執行的實驗性功能。
如果您正好使用 Yeoman 來 Scaffold 專案，則會建立一個 Gruntfile，其中包含在電腦上即時重新載入功能所需的一切。只需變更一個屬性，也就是電腦上的 hostname，即可跨裝置運作。應該會列在 connect 下方。如果您發現 hostname 設為 localhost，請將其變更為 0.0.0.0。接著執行 grunt server，並照常執行，應會開啟新視窗，顯示網頁的預覽畫面。網址可能類似 http://localhost:9000 (9000 是通訊埠)。
啟動新的分頁或終端機，並使用 ipconfig | grep inet 尋找系統的內部 IP。看起來可能像192.168.32.20。最後一步是在您要同步處理即時重新載入的裝置上開啟瀏覽器 (例如 Chrome)，然後輸入這個 IP 位址，後面加上之前的通訊埠編號，例如 192.169.32.20:9000。
大功告成！即時重新載入功能現在應會使您在電腦中來源檔案所做的任何編輯，同時在電腦版瀏覽器「和」行動裝置上的瀏覽器上觸發重新載入作業。太棒了！
Yeoman 也提供了行動產生器，輕鬆設定這個工作流程。
艾密特生活風格
Emmet LiveStyle 是瀏覽器和編輯器外掛程式，可將 CSS 即時編輯功能導入開發工作流程。目前適用於 Chrome、Safari 和 Sublime Text，支援雙向編輯 (編輯器轉換成瀏覽器，反之亦然)。
進行變更時，Emmet LiveStyle 不會強製完全重新整理瀏覽器，而是透過開發人員工具遠端偵錯通訊協定推送 CSS 編輯內容。換句話說，無論使用電腦版 Chrome 或 Android 版 Google Chrome，您可以在任何連線版本的 Chrome 中透過電腦編輯器查看所做的變更。
LiveStyle 具有所謂的「多畫面模式」，非常適合用於測試及調整跨視窗和裝置的回應式設計。在多檢視畫面模式中，所有編輯器更新都會套用至同一頁面的開發人員工具更新，套用至所有視窗。
安裝 LiveStyle 套件後，即可開始即時編輯 CSS：
- 啟動 Sublime Text，並在專案中開啟 CSS 檔案
- 啟動 Chrome，然後前往要編輯的 CSS 所在頁面
- 開啟開發人員工具並前往 LiveStyle 面板。勾選「啟用 LiveStyle」選項。注意：在每個視窗的即時編輯工作階段中，您必須保持開啟開發人員工具，才能套用樣式更新。
- 啟用這個功能時，左側會顯示樣式表清單，並在右側顯示編輯器檔案清單。選取要與瀏覽器建立關聯的編輯器檔案。大功告成！懸吊式麥克風。
現在當您編輯、建立、開啟或關閉檔案時，系統會自動更新編輯器檔案清單。
結論
跨裝置測試仍然是快速發展的新空間，有許多正在開發中的新競爭者。幸好現在有許多免費和商用工具，可用於在多種裝置組合中確保您的相容性和測試。
儘管如此，仍有許多可能可以改善的領域，建議您思考如何利用這項工具進行跨裝置測試，才能進一步改善。能縮短設定時間並改善跨裝置工作流程的任何工具都能獲益良多。
問題
使用這些工具進行測試時，我遇到的最大問題可能是裝置會定期入睡。這不是交易中斷，但一段時間後會很惱人。建議您盡可能將裝置設為「不要休眠」作為解決方法，但請注意，除非您一直接上電源，否則這會消耗電池電力。
我個人沒有在使用 GhostLab 時遇到任何重大問題。定價為 $49 美元，部分價格可能略有下降；但請留意，如果您經常使用價格的頻率較高或較低，請特別留意。設定的好處之一是不必擔心是否要為各個目標裝置安裝和管理用戶端。可以在所有地方使用相同網址。
使用 Adobe Edge Inspect 後，我發現必須在每部裝置上安裝及使用特定用戶端，有點繁瑣。我也發現無法持續重新整理所有連線的用戶端，也就是我必須自己使用 Chrome 擴充功能來進行這項操作。此外，您必須訂閱 Creative Cloud，且僅限於在用戶端 (而非裝置上的指定瀏覽器) 載入網站。這可能會限制準確測試的能力。
「遠端預覽」功能如同廣告宣傳，但它極輕。也就是說，除了在裝置中重新整理網站之外，您還必須使用更進階的工具選項。不會同步處理點擊次數或捲動等項目。
推薦做法
如果您在尋找免費的跨平台解決方案，以便快速上手，建議您使用遠端預覽功能。對公司在尋找付費解決方案的人而言，GhostLab 一直是很好的體驗，但僅適用於 Mac。如果是 Windows 使用者，Adobe Edge Inspect 通常是最適合的呼叫方式，但減少了一些問題。
Grunt 和 LiveStyle 也很適合用來在開發期間增強即時疊代。