使用weinre調試手機頁面

標籤：weinre   web mobile debuge   手機頁面調試   

Weinre（Web Inspector Remote），是一種遠端偵錯工具。功能與Firebug及chrome調試器類似，可以協助我們即時更改頁面元素、樣式，調試JS等。

工作原理
weinre由三部分組成 1. debug server核心組件，運行在服務端，負責與另外兩部分通訊。 2.debug clientwebkit核瀏覽器 ,與debug server通訊。展現調試介面，允許你修改dom，查看網路資訊等。 3. debug target. 待調試的頁面。你需要在頁面中嵌入一小段js。它將通過XHR方式與debug server通訊，進行調試資訊的收發。

安裝

安裝十分方便。以linux機器為例，首先你需要有node.js。之後運行npm g-g intall weinre即可。

運行 1. 啟動debug server端命令列下執行

weinre --httpPort 8081 --boundHost 10.136.30.144

意思是監聽10.136.30.144的8081連接埠
2. 啟動debug clientpc瀏覽器上訪問http://10.136.30.144:8081/會看到類似下面的頁面

列出了weinre的文檔及用於調試的url。點擊http://10.136.30.144:8081/client/#anonymous， 看到如下調試介面。

告訴我們，目前沒有targets接入。同時列出了client及server端資訊。
3.  啟動 target在需要調試的頁面中需要引入一段js

<script src="http://10.136.30.144:8081/target/target-script-min.js#anonymous"></script>

當然，如果要調試的頁面很多，不方便在每一頁都直接插入上文的代碼。可以瀏覽器“書籤”的方式儲存一下面一段js，以動態方式插入script

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

以上兩種方式在步驟2中提到的文檔頁中有詳細說明。假設我們要調試的頁面運行在10.136.30.144:3927頁面中引入js後，用手機瀏覽器開啟待調試頁面http://10.136.30.144:3927/new
4. 開始調試手機訪問頁面後，我們回到步驟2中所說的調試介面。發現此時，targets中多了一條，即是我們在步驟3中用手機開啟的待調試頁面。點擊該target，即可利用熟悉的調試介面進行調試了。

其它說明
1. 用手機連續訪問多頁面，這些頁面都會在targets中列出，選中其中一個，即可進行調試。2. 點擊調試頁面中的remote, 可以從調試頁面切回targets列表。3. 儘管文檔上說client要在基本webkit核的瀏覽器上使用（Google Chrome， Apple Safari， Other recent-ish WebKit-based browsers ）， 但親測firefox上貌似也能玩轉。4. 也是最重要的。server與target和client一定要能互聯互連，這樣才可以調試。
一些局限性1. elements部分，可以查看dom，修改樣式。但無法直接編輯dom2. resource部分，localstorage可以查看，但cookie看不到。3. network部分，只能看到非同步載入的請求。（也許我用的方法有問題?）4. cosole部分，可以看console log， 運行js。但無法像firebug那樣報出js的錯誤，更不能加斷點調試。anyway， 即使是這樣，也為我們的調試提供了一定程度的便利。總比閉起眼亂碰好的多。特別是當你要調試iphone頁面，手上又無mac book時，試試weinre吧。啥？你連iphone都沒有！？god bless you~

使用weinre調試手機頁面