任何裝置都能進行 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... 搞笑畫面如下，蠻有趣的。
