Site icon Soul & Shell Blog

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

任何裝置都能進行 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) 可以透過以下命令安裝:

[root@linux ~]# wget http://nodejs.org/dist/v0.10.26/node-v0.10.26-linux-x86.tar.gz

[root@linux ~]# tar -zxvf node-v0.10.26-linux-x86.tar.gz

[root@linux ~]# cd node-v0.10.26-linux-x86

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

[root@linux ~]# npm install weinre

[root@linux ~]# cd bin

[root@linux ~]# ./node node_modules/weinre/weinre --boundHost -all- --httpPort 3068

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

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

<script src="http://192.168.10.104:3068/target/target-script-min.js#anonymous"></script>

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

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

     

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

參考資料

Exit mobile version