Mobile WebApp 開發技巧 - 利用 weinre 遠端 Debug 網頁元素 (for Linux)


weinre-icon-128x128

任何裝置都能進行 Debug

當我們在開發 Web 時,難免會遇到 Mobile 的使用者,偏偏很多奇怪的問題都是發生在手機的瀏覽器中,特別是版本眾多的 Android 系統。最常處理的問題就是畫面 Render 與 Layout 相關的議題,前一篇文章介紹過 iOS 中方便的 Web Inspector (Remote Debugging Tools),但由於限制太多對於非 Apple 系列玩全部友善,因此我們需要一個更泛用的除錯工具。

什麼是 weinre ?

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

Linux 安裝 weinre

要安裝 weinre 首先要先安裝 nodo.js,請在官方網站中下載適合的版本進行安裝,Linux (x86) 可以透過以下命令安裝:

第二步驟透過 npm 安裝 weinre, 並且啟動 Server,可以透過 --httpPort 指定 port,命令如下:

啟動後就可以看到以下畫面:

圖片 15

Access Points 就是 Debugbing Tools,進入 Access Point 之前我們要先將要 Debug 的網頁掛上 Target Script,如下:

用一個視窗開啟我們的 Debug 網頁 (有掛Target Script),然後進入 Access Points 就可以看到連上線的資訊,如果沒有請重新整理,畫面如下:

weinre-0

點下 Target 超連結後就會顯示 DOM 資訊了,行動裝置也是一樣的用法,只要掛上 Target Script 就可以運作,畫面如下:

weinre-2     weinre-1

weinre 的 Debug 介面也是用 Web 製作的,想搞笑的話也可以按下 F12 開啟 Chrome 的 Debug Tool 來 Debug Debug Tool... 搞笑畫面如下,蠻有趣的。

weinre-3

參考資料

Facebook 留言

廣告

樂樂童鞋