移動端調試

標籤：style   blog   http   color   使用   os   strong   檔案   

      最近兩年無線端的html頁面很火，博主最近也做了幾個手機項目。相信做過的人都會碰到調試這個棘手的問題。一是沒有相應的裝置，所以很多人使用虛擬機器調試，二是沒有較好的調試工具，沒法即時得到調試資訊。現在將我的一些調試經驗總結一下：

本文介紹了無線端調試的四種方式，分別是：

• charles設定代理 
• fiddler設定代理
• MTL 工具使用
• weinre （查看dom元素，查看console.log輸出的資料）

（如果大家還有其它的調試方法，歡迎補充）

一、charles設定代理

 charles 一個比fiddler更強大的http調試工具。如果想對charles有更一步的瞭解，可以猛戳這裡.  下面我們用 Mac+ipone/ipad進行示範

1.設定入口

2.設定，連接埠設定為 7999，這裡可以隨意

3.手機設定

4.點開右側箭頭，進入代理設定，主機名稱為你電腦的IP，mac下通過 ifconfig 命令查看，IP為 charles 設定的監聽地址

5.手機嘗試串連時，charles 會提示

6. 也可以直接設定允許串連

7.配置好了之後記得啟動監聽程式（command+r）

8.開啟手機瀏覽器，進入百度，可以看到

 

二、fiddler設定代理1.設定入口

2.設定連接埠，並允許遠端連線

3.cmd下查看自己的ip，填入手機代理設定（同charles手機代理設定），並將上面設定的監聽連接埠填入 80884.開啟你的手機瀏覽器，進入百度，你會在 fiddler 中看到

然後就盡情調試你的程式吧~

三、MTL工具使用

MTL是我們公司內部的一個無線測試平台。原理就是將無線端的請求代理到這個平台，可以看到介面的返回資料，也可以自己mock一些ajax資料進行響應。呵呵，由於一些大家都知道的原因，具體的就不講了。相信你們公司也一些自己的測試平台

四、weinre

上面講的三種方式都是查看介面的，下面就簡單介紹一下Weinre。Weinre的本意是Web Inspector Remote，它是一種遠端偵錯工具。功能與Firebug、Webkit inspector類似，可以協助我們即時更改頁面元素、樣式，調試JS，查看console輸出資訊等

1.安裝

npm install –g weinre

2.開啟

weinre -httpPort 7999 -boundHost -all-

• httpPort 監聽連接埠
• boundHost –all- 綁定主機

3.說明都寫在圖片裡頭，相信聰明的你可以悟到

 

 

4.真機調試

行動裝置須有有wifi無線串連，且和電腦在同一網段。把要調試的頁面放在伺服器中相應的檔案夾中。在手機的頁面中開啟要測試的頁面地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081頁面，點擊“debug client user interface:”連結進入weinre的Debug介面，如果成功添加了Debug Target，這裡可以看到它。

 

 

　　2、接下來我們就可用自己熟悉的方式調試頁面了，並且調試結果會即時顯示在行動裝置上

 

 

 

 

MAC系統更為簡單，不用命令列，直接運行app即可啟動weinre，接下來的步驟和windows一樣。

 

 歡迎大家提供其它更多的調試方案，有問題可以聯絡我哦！ [email protected]

(最後特別感謝閻王同學的支援！)