提醒：本文最後更新於 2493 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

今天Miller兄分享了一個很好的工具Weinre(WEb INspector REmote)，可以在一個Webkit下遠端除錯另一個Webkit裡的網頁，典型應用就是在桌面瀏覽器裡除錯iPhone、iPad等移動裝置上的Safari。剛好之前小強有類似需求，這裡就簡單介紹下它的基本用法。

首先，去這裡下載Weinre的最新版。這個目錄有兩個zip包，下載那個weinre-jar-x.x.x.zip就好了，解壓得到weinre.jar，隨便找個目錄放。那個mac包可以忽略，它只是把jar打包成一個圖示巨難看的app，還不如直接用jar方便。

然後開啟終端，進到weinre目錄，執行下列命令，以指定埠和要繫結的ip啟動weinre服務（假設java環境變數已經配好）：

java -jar weinre.jar  --httpPort 1070 --boundHost -all-

被除錯的網頁需要跟weinre服務建立連線，需要頁面引入target-script-min.js(上圖紅線標出)。根據實際情況，可以選擇修改原始碼加入script標籤，或者通過收藏夾執行js動態插入。

接著，點選上圖中第一個連結，開啟weinre client，應該是這樣的畫面：

可以看到，上圖中Targets為空。這是因為還沒有頁面連上weinre服務。在iPad上訪問主機的一個頁面試試（iPad必須和主機在同網段，且訪問的頁面已經加好了target script）。可以看到，Targets有內容了：

剩下的事情大家都知道，各個Tab對應各自不同功能，可以在主機上隨意修改遠端網頁上的dom、執行js、檢視資源請求等等，用過webkit除錯工具的同學肯定不會陌生。只是個人感覺很有用的除錯js功能卻沒有提供。

先介紹到這裡，希望對大家能有幫助，最後再貼兩張截圖（可以看到第二圖的UA是iPad）：

update @ 2012-03-18：寫完這些，我又嘗試了Adobe Shadow這個基於Weinre開發的工具。它能輕鬆的在多臺裝置（支援IOS、Android）上同步瀏覽網頁，還能任選其一來除錯。由於在移動裝置上有App的支援，省去了手工插入target script這一步，非常方便。美中不足是它的client頁訪問的

update @ 2013-01-05：這篇文章寫了快一年，實際上平時我很少使用這種方式除錯移動網頁。大家知道，最新的Mac版Safari自帶遠端除錯功能，使用更方便。簡單使用步驟：安裝Mac版Safari，在“偏好設定”裡選擇“在選單欄顯示‘開發’選單”；再在iOS裝置中進入“設定”->“Safari”->“高階”，開啟“Web檢查器”，連上電腦。這樣，在Mac版Safari的“開發”選單下應該可以看到自己的裝置名了，子選單下有該裝置上開啟的網頁。PS：這種方法對於嵌入在App中的網頁也同樣有效，非常贊~唯一遺憾的是，Safari6貌似木有了Windows版了，所以只能在MacOS下用這種方法了。

--EOF--

提醒：本文最後更新於 2493 天前，文中所描述的資訊可能已發生改變，請謹慎使用。