pc調試移動終端web代碼（工具Weinre）

作移動web開發的同仁，多少都爲各個瀏覽器困擾。基於手機瀏覽器的性能和各個開發商的私人考慮，咱們如今在android、ios等系統還很難使用到徹底統一的瀏覽器內核。不管是ucweb、chrome、safari、海豚等，每一個瀏覽器都或多或少的閹割了不少性能，更不用說地段的手機了。

這樣帶來咱們不少困擾，我原本能夠直接在pc上經過chrome來調試mobile 頁面，可是每每調試後頁面移植到mobile，還有不少不盡人意。

在pc上，屏幕大，咱們能夠很方便的經過各類調試工具，F12實時調整。但手機、pad屏幕足夠小，並且無實體鍵盤。這種調試變得艱難了不少。

網上目前也有不少成熟的方案，並且html5也考慮到解決此問題。聽說，ios6瀏覽器已經支持在pc上調試同網絡的移動端web。偶是窮屌絲，尚未用上mac系統。

如今的事情，有如今的解決方法。

主要就說Weinre。

功能：在pc上經過調試移動設備上web頁面，幾乎和pc上同樣實時。

使用條件：
1：本地服務端環境，各類php、jsp、.net等；
2：pc和移動在同一網絡下；
3：使用Weinre建立本地調試環境；
4：測試頁面，調價Weinre可識別代碼。

明白上面的，就能夠參考下面的教程繼續操做了。我在幾個地方加上注意說明就ok。
教程：http://www.cnblogs.com/shihao/archive/2012/05/21/2511063.html （這不是原做者的，都是轉載的）

第一步：下載Weinre
Ps:Weinre項目已經被收購，原官方github已經關閉，你能夠去http://ishare.iask.sina.com.cn/f/23607399.html
第二步：運行Weinre
ps：只須要把Weinre放在你的電腦任何一個磁盤，注意不要解壓。而且保證你的點已經有java運行的環境，在Weinre的文件夾地址欄輸入，回車執行

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

你就能夠看到cmd窗口，表示環境已經建立好。

再打開http://localhost:8081/，就能夠發現weinre已經建立成功

ps：你能夠把localhos換成電腦IP，比我個人就是http://192.168.0.112/wordpress/

第二步：給你的電腦加上可被weinre檢測到的js代碼便可
1.Target Script
該方法須要在調試的頁面中增長一個js：

http://localhost:8081/target/target-script-min.js#anonymous

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

2.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書籤中，而後使用移動設備訪問我想要調試的頁面，最後點擊Debug書籤就OK了。>
ps：帶測試的代碼是在你的本地服務端環境下，不要放在其餘地方，不然你的移動設備無訪問，Weinre也沒法監控到了。

第三步：移動設備訪問你添加檢測代碼的頁面
訪問：http://localhost:8081/client/#anonymous
便可看到被檢測的頁面，點擊便可實時調試

本文固定連接: http://www.xiazer.com/archives/60 | 夏至-互聯網的朝聖客