Weinre《調試使用》調試Mobile Web

如今、未來，用移動設備上網愈來愈成爲主流。但對於開發者們來講，移動web的調試一直是個難題，前期能夠使用模擬器來協助調試，但到了真機調試階段就讓人很是頭痛。而Weinre就是解決這難題的利器。　

　　Weinre的本意是Web Inspector Remote，它是一種遠程調試工具。功能與Firebug、Webkit inspector相似，能夠幫助咱們即時更改頁面元素、樣式，調試JS等，下面就簡單介紹下如何使用。下面以以Windows系統爲例：

　　1、首先確保你的電腦已經搭建好了java環境。即：安裝了jdk。這裏就很少說了，在網上搜個jdk，一步步安裝及ok。

　　2、安裝及運行Weinre

　　　　一、下載：http://ishare.iask.sina.com.cn/f/23607399.html  ，這裏直接下載jar包，下載好以後放在一個文件夾裏就行不需任何處理。

　　　　 二、運行cmd，在weinre所在文件夾的地址欄輸入代碼：java -jar weinre.jar --httpPort 8081 --boundHost -all-  （以下圖）：

　　　　 三、回車後會出現相應信息(注意：在調試過程當中不要關閉cmd)：

　　　　四、打開本地瀏覽器，（使用webkit內核瀏覽器(chrome、safari)）訪問http://localhost:8081/，不出意外的話能夠看到weinre的基本信息。

　　　　五、上圖中的"debug client user interface"是weinre的Debug客戶端，點擊進入後能夠看到目前尚未被測試的目標網頁。

　　3、添加Debug Target

　　　　爲了讓須要調試的頁面被weinre檢測到，須要添加Debug Target，有兩種方法：
　　　　一、Target Script  

           該方法須要在調試的頁面中增長一個js：

<script src="http://192.168.0.106:8081/target/target-script-min.js#anonymous" type="text/javascript">
</script>

　　　　添加後在移動設備中訪問該頁面便可，若是調試的頁面比較少能夠使用這個方法，若是多的話推薦第二種方法

　　　　二、Target Bookmarklet
　　　　該方法是將一段js保存到移動設備的書籤中，能夠在 http://localhost:8081/ 找到這段js：

javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

　　　　我將這段js保存到名爲Debug書籤中，而後使用移動設備訪問我想要調試的頁面，好比說 http://iinterest.net，最後點擊Debug書籤就OK了。

　　4、真機調試。

　　　一、　移動設備須有有wifi無線鏈接，且和電腦在同一網段，（確保本機安裝了服務器，能夠到網上搜xampp或wamp，）把要調試的頁面放在服務器中相應的文件夾中,我安裝的是xampp,因此放在htdocs目錄下。在手機的頁面中打開本頁面的地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081頁面，點擊「debug client user interface:」連接進入weinre的Debug界面，若是成功添加了Debug Target，這裏能夠看到它。

　　二、接下來咱們就可用本身熟悉的方式調試頁面了，而且調試結果會實時顯示在移動設備上

 

MAC系統更爲簡單，不用命令行，直接運行app便可啓動weinre，接下來的步驟和windows同樣。

【轉載出處】【http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html】