[Weinre]使用Browser-Sync中的Remote Debug工具-Weinre

2015-09-22

933
0
2016-03-05

摘要:[Tool]使用Browser-Sync中的Remote Debug工具

之前有介紹Browser-Sync這個工具，用來在開發過程中自動刷新頁面。Browser-Sync的功能不僅止於此，他是定位在加快測試的流程，所以也提供了相關的工具。其中一個，就是好用的工具-遠端偵錯(Remote Debug)用的tool-Weinre。

之前有介紹Browser-Sync這個工具，用來在開發過程中自動刷新頁面-[Tool]使用BrowserSync自動刷新頁面。Browser-Sync的功能不僅止於此，他是定位在加快測試的流程，所以也提供了相關的工具。其中一個，就是好用的工具-遠端偵錯(Remote Debug)用的tool-Weinre。

Weinre是甚麼

網路上已經有人介紹Weinre - 利用 weinre 遠端 Debug 網頁元素 (for Linux)，也可以連上Weinre的官網查看說明：

weinre 的全名是 WEb INspector REmote，顧名思義是一個遠端的網頁檢視器。在技術上 weinre 其實是一個以 node.js 為基礎的 Http Server，利用了 Web 即時通訊的技巧，將某個已經掛上 Target JavaScript 的 Browser ，透過背景將 DOM 資訊傳遞到 Debugging Tools 中。Debugging Tools 也是由 Web 進行設計，連接後雙方可以即時傳遞一些命令讓我們即時看見反饋，是一個很聰明的做法。而且沒有太多的環境限制，基本上可以執行 JavaScript 的瀏覽器都可以使用。

也就是說，Weinre其實是透過node.js的技術建立一個Web 站台。所有連結到該站台的瀏覽器Client端，都會透過WebSocket建立雙向連結。所以，Weinre就可以將Client端瀏覽器的一些資訊，收集到Weinre的站台上進行顯示。

你或許會說：現在每一個瀏覽器都有內建開發者模式，要debug的話，直接開啟開發者模式就好啦。

一般在桌機上要進行debug的話，瀏覽器的開發者模式的確就足夠使用了。不過，現在已經有越來越多的網頁在手機的瀏覽器被開啟。各廠牌各平台的瀏覽器支援的功能都不一樣，甚至連UI顯示都有些差異。雖然iPhone的Safari有提供開發者模式，但其他廠牌的手機的瀏覽器幾乎都沒有提供開發者模式。如果需要檢視這些手機的瀏覽器的UI處理、運作情況、甚至進行debug，這時候，Weinre這個工具就可以派上用場了。他沒有平台的限制，只要可以執行JavaScript，且可以支援HMTL5的瀏覽器，就可以收集其資訊到Weinre的站台上進行顯示。

Weinre的介面其實跟一般瀏覽器的開發者模式類似，其功能列如下:

可以看到，主要有幾個功能:

Elements:檢視網頁上的HTML元素及其Style
Resources:檢視Local Storage及Session Storage的資訊
Network:檢視該網頁的網路連線資訊
Timeline:檢視網頁的時間軸
Console:可以下指令，也可以檢視Console.log()的輸出

Weinre厲害的地方，就是他做到Server與Client端雙向的互動。也就是說，Weinre的Server端不但可以檢視Client端的網頁資訊，還可以在Server端發送資訊到指定的Client端。也因此，在Server端工具列的Console中下一個Alert()指令，指定的Client端真的會跳出一個Alert視窗出來。

當然，在Weinre的Elements頁籤中設定HTML元素的Style，例如設定文字顏色為紅色。