用手機看網頁,越來越多,手機app套個webview的也很多,那該如何調試手機上的頁面了？比如 斷點,選dom,console,控制台輸出,查看內存,==
嗯,萬能的的chrome和safari還是幫我們解決了這些事情
android下調試手機上的網頁(斷點,查看修改dom,console輸出,timeline,===)
如何用本地的文件代替手機上訪問的頁面(本地調試)
一些真實存在的場景,開發一個微信下的web頁面(或者手q),難道每次都上傳到服務器在來調試??
這樣明顯不好,用本地的文件只需要刷新下就好了
這里就需要代理神器fiddler了
具體操作
1.首先你得有一個360隨身wifi,和電腦上裝360,用360共享出一個網絡,手機連上那個網絡
2.fiddler上選擇到代理的文件 (不知道怎么代理的可以去這個地方看怎么代理http://www.cnblogs.com/wtcsy/p/fildderwirte.html)
3.在手機上做代理設置
android上
先連接上360分享出來的網絡,長按該網絡,出現彈框后,選擇"修改該網絡",然后在勾選"顯示高級選項",設置代理ip和代理端口,截圖如下
然后用手機打開網址,發現出現的就是代理的文件了
ios上
先連接上360分享出來的網絡,點 網絡后面的小感嘆號,然后設置網絡,如下圖
android下調試手機上的網頁(斷點,查看修改dom,console輸出,timeline,===)
一些說明
這個方案是chrome弄出來的,所以只支持chrome瀏覽器
也就是說手機上必須是chrome瀏覽器,電腦上也必須是chrome瀏覽器,且2個版本還得高（我電腦上的版本是41.0.2272.76, 手機上的版本是40.0.2214）
具體操作
1.首先保證電腦和手機上都以安裝了比較新的chrome瀏覽器
2.手機用數據線和電腦連接起來,然后在 設置--->開發人員選項--->USB調試， 選中USB調試(個人手機的目錄結構是這樣)
3.在電腦上的chrome的地址欄輸入chrome://inspect/#devices,會出現如下圖的界面,紅色框框里面是手機里面chrome打開的頁面
4.點擊inspect連接,就會彈出一個chrome控制器的框了,如下圖所示
5.現在可以在彈出的框里面進行操作了,跟操作電腦上chrome一樣的,斷個點試試,如下圖
ios下調試手機上的網頁
一些說明
調試iphone上的網頁沒那么容易,因為你先得有個iphone，還得有個mac,都不便宜呀!!!
具體操作
1.首先是手機, 設置-->Safari-->高級-->Web檢查器, 把web檢查器打開,如下圖
2.然后是mac上safari的設置, Safari-->偏好設置-->高級-->在菜單欄中顯示"開發"菜單,如下圖所示
3.在手機上打開一個網頁,在mac上的safari上 開發-->"手機的名稱"(我的是wtcsy) ， 如下圖所示
4.點擊后面的地址,會彈出一個框,切到調試器,就可以斷點了,還可以console,截一個斷點的圖
遇到的一些問題
問題1
Q
android上點了inspect一直白屏
A
看網上的解釋,聽說是請求了一個國外的地址,被牆了,所以一直打不開
解決辦法FQ.
如何FQ?
去這個地址下個chrome暢游版即可 下載地址 http://www.sd173.com/html/928.html
問題2
Q
在mac的safari上 開發-->手機名稱(我的是wtcsy) 后面顯示空白,如下圖
A
是因為mac上safari上版本版本比較低,升級下系統即可