之前做移動前端調試頁面的時候就是簡單的使用Chrome模拟器調試，能滿足基本基本的需求，後來發現了基于Web Inspector(Webkit)的遠端調試工具Weinre，可以在PC端直接調試運作在移動裝置上的遠端頁面，，在PC端可以即時修改目标網頁的HTML/CSS/Javascript，調試過程可實時顯示移動裝置上頁面的預覽效果，并同步顯示裝置頁面的錯誤和警告資訊，可以檢視網絡資源的資訊，不支援斷點調試，聽起來是不是很厲害的樣子，但真正用起來卻很友善。
1.版本選擇
Weinre最早是有Java版本的，是以網上的有些部落格是Java版本的實作過程，Java版本在13年的時候已經沒有更新，是以會出現一些問題，Weinre官網現在介紹自己說是一個基于NodeJS項目，因為需要本地需要安裝Node。weinre是一個命途多舛的項目，最早被PhoneGap收購，後來PhoneGap又被Adobe收購，Adobe收購PhoneGap後把PhoneGap捐給了Apache，Apache把PhoneGap放在Cordova的項目中，Weinre也從最初的Java移植到了目前的NodeJS版本。
2.安裝（預設已安裝Node，如果沒有安裝可以參考本人之前部落格）
1
<code>sudo npm -g install weinre</code>
3.擷取ip位址（mac環境）
<code>ipconfig getifaddr en0</code>
4.運作weinre
<code>weinre --boundHost 192.168.1.105</code>
5.浏覽器中輸入http://192.168.168.101:8080即可看到以下頁面:
6.手機上通路需要調試的web頁面，然後在頁面底部插入腳本(最後的#anonymous标題與PC端對應)：
<code><script src=</code><code>"http://192.168.1.105:8080/target/target-script-min.js#anonymous"</code><code>></script></code>
7.PC端浏覽器通路http://192.168.1.105:8080/client/#anonymous頁面，可以看到以下效果:
對手機端頁面實時調試:
8.小結：
①有可能會出現頁面無法顯示頁面的源代碼，請注意target中的資訊，確定手機和電腦在同一區域網路内；
②如果出現connection lost請即時重新整理頁面，如果需要調試時間較長不想丢失連結的話嘗試用手機線和電腦連結；
③支援主流Android，iOS以及其他平台，不支援iOS 3.1.3及其更早平台以及webOS 1.45或更早平台；
本文轉自Fly_Elephant部落格園部落格，原文連結：http://www.cnblogs.com/xiaofeixiang/p/4993812.html，如需轉載請自行聯系原作者