【轉】手機web前端調試頁面的幾種方式

前言

PC端web頁面調試比較容易，這裏主要說幾種移動端調試的方法，從簡單到複雜、從模擬調試到遠程調試，大概分爲幾部分：

一、Chrome DevTools（谷歌瀏覽器）的模擬手機調試

二、weinre(web inspector remote)遠程調試工具

三、微信的「web開發者工具」，集成了Chrome DevTools和weinre，作的比較好

四、Chrome DevTools遠程調試Android和iOS頁面

五、Eruda——手機網頁前端調試面板

閱讀說明

本文不是小白文，須要必定前端基礎才能看懂；此外，本文並非調試教程，不少細節並無截圖或者描述的很清楚，就如我說的已經默認閱讀者懂得一些基本的調試方法；

我這裏主要是對幾種調試方式進行彙總，方便本身也方便他人看完文章以後知道更多的調試方式；若是遇到哪一步本身看不懂能夠百度或者評論區留言，謝謝！

一、Chrome DevTools模擬手機調試

直接使用谷歌瀏覽器的開發者工具，能夠參照下圖，也可使用快捷鍵F12或者ctrl+shift+I；我的以爲不論是哪一個瀏覽器，直接先按下F12，通常均可以打開開發者工具，打不開再說嘛。

這種調試方式不只能用於模擬手機調試仍是主要的PC端頁面調試的方式，這裏主要說用於手機調試。

 打開後看到相似以下界面的開發者調試界面，Elements能夠查看文檔元素，Console能夠在線調試js和查看輸出結果，Sources能夠調試JS和查看依賴資源，Network查看全部的網絡請求

 

在瀏覽器地址欄輸入要調試的頁面地址，選擇模擬設備，而後就能夠選擇要調試的js調試了，右側面板中有調試操做按鈕；在Application面板中能夠看到應用存儲的數據Cookies什麼的

若是沒有須要模擬的機型怎麼辦？固然是增長了，打開DevTools的設置面板，左圖中的Setting點開會出現右圖，以下：

                 

二、weinre(web inspector remote)遠程調試工具

weinre實際上是在待調試的頁面中嵌入了一個特定的js，這樣頁面才能被weinre監測到並能打開調試面板；要注意weinre的調試面板不能調試JS,也不支持打斷點調試，僅能用於調試頁面樣式，使用場景有限；

根據本身須要來選擇吧，具體的使用安裝過程參考：http://blog.csdn.net/freshlover/article/details/42640253；因爲我使用的較少，也並不推薦這款工具，因此只是做爲介紹和了解放在這裏；若是想

對weinre深刻了解的本身參考連接中的內容琢磨吧。

三、微信的「web開發者工具」

微信的web開發者工具，集成了谷歌的DevTools和weinre，能夠說是上面兩點的集合，對於那些微信公衆號裏面使用的H5網頁，這個是最好的選擇； 

這個工具調試通常性的網頁就和谷歌瀏覽器調試同樣，看到的調試面板也差很少；可是若是要調試微信相關的功能好比：JS-SDK，權限列表等就必須使用這個工具了

工具下載地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN

 

除了使用url模擬調試外,微信的web工具也能對安卓手機進行遠程調試，目前最新版還不支持iOS遠程調試，打開設備監視面板：

打開後看到以下界面，能夠看到有一臺華爲設備已經鏈接，遠程調試要注意兩點：

一、手機和電腦使用usb鏈接，手機要開啓usb調試模式(不一樣手機不同)

二、手機上安裝最新版谷歌瀏覽器並打開

而後點擊inspect便可開始調試當前手機谷歌瀏覽器打開的頁面，這裏不細說這個了，也不必細看，下面會詳細說明

再看看微信的移動調試，iOS提供的只有普通代理測試，Android除了代理測試，還有X5 Blink內核調試；可是並非全部手機都支持X5 Blink；因此廣泛仍是使用代理調試

手機的wifi網絡配置好代理後，點擊開始調試，出現監控界面，發現其實就是使用的weinre來實現的，不過微信對其作了改進，相比直接使用 weinre 有如下優勢：

一、無須手工在頁面中加入 weinre 調試腳本，這點很方便

二、能夠在 weinre 的網絡請求頁卡Network中，看到完整的http請求log，而且沒有隻能看到ajax的侷限

可是也有弊端，因爲是微信開發的工具，移動調試只能調試微信App中打開的頁面並且並非全部能在微信中打開的網頁都能調試，懷疑是工具內部作了過濾

重啓微信後，在微信中訪問頁面，能夠被監測到，而後能夠調試網頁樣式了，在Network頁卡中能看到每一個請求的參數與響應結果

總之，若是調試頁面是微信中的頁面(通常就是公衆號)使用微信提供的工具效率很高；若是是通常瀏覽器中的頁面也可使用微信的Chrome DevTools但最好不用weinre

四、Chrome DevTools遠程調試Android和iOS頁面

電腦上安裝新版谷歌瀏覽器，而後地址欄輸入chrome://inspect會打開設備監視頁面，這裏能夠監視到iOS和Android設備，若是界面和圖中不一致請安裝最新版瀏覽器

Android:

前提：

一、手機和電腦使用usb鏈接，手機要開啓usb調試模式(不一樣手機不同)

二、手機上安裝最新版谷歌瀏覽器並打開

會發現設備監視頁面多出了一個華爲設備，而且能看到當前手機上谷歌瀏覽器打開的網頁的鏈接

a):能夠在這裏輸入手機要打開的url而後open，手機上顯示的當前頁面就會改變

b):inspect表示開始調試當前頁面，會打開調試面板(重要)

c):focus tab，表示讓手機顯示當前這個鏈接

d):reload表示從新加載頁面，也就是刷新

e):close表示關閉當前手機顯示的頁面

接下來，點擊inspect開始調試頁面，注意若是google瀏覽器不能翻|牆的話，這個調試頁面是打不開的，能夠百度修改hosts文件翻|牆

 而後就能夠像調試PC端網頁同樣遠程調試手機網頁了

iOS(window系統上，若是是macbook系統忽略此部分):

能夠參考：http://www.cnblogs.com/kelsen/p/6402477.html

前提：

一、電腦安裝iTunes軟件，否則蘋果手機不能正常被識別，安裝好後數據線鏈接手機和電腦

二、打開手機的設置——>Sarafi——>高級——>Web檢查器——>啓用(默認是關閉的，將其打開)

三、下載ios-webkit-debug-prox代理(32位或者64位)，其做用就是在Chrome和Sarafi之間創建了一個代理，便於電腦的Chrome檢測手機Sarafi打開的頁面

四、在cmd中執行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌內置的監視器來調試(默認使用遠程的)

啓動後會監聽9222端口，而後看到鏈接上了一臺名爲jiba的iOS設備，括號中爲設備的UDID；而後看谷歌瀏覽器是否檢查了這個端口，右圖中有9222端口便可，沒有就手動添加

     

此時打開手機Sarafi瀏覽器，打開百度首頁，發現瀏覽器能檢測到，沒看到就刷新這個監視界面，通常來講會在3秒內自動出現

 

點擊inspect一樣出現了調試面板，以下，發現iOS調試的面板不能看到手機屏幕在電腦上的投影，不過這並不影響調試；可是可能會遇到在調試js時斷點不生效的問題，

若是很不幸遇到這個問題的話，將圖中紅框中的按鈕連續點擊兩次——先禁用斷點再啓動便可恢復端點調試功能，不知道爲何，猜想是這個過程當中恢復了斷點的狀態；這個問題很奇葩。

到這裏使用Chrome調試iOS和Android就都完了，這種使用谷歌瀏覽器的方式，在Android上依賴於手機谷歌瀏覽器，在iOS上依賴Sarafi瀏覽器，受到具體軟件的限制；不過能夠理解，畢竟遠程調試不如模擬調試簡單

五、Eruda——手機網頁前端調試面板

eruda是什麼？正如標題所言，是用來在手機上調試頁面的，注意是在手機上不是在電腦上；前面說的幾種調試方式都是在電腦上模擬調試或者遠程調試手機頁面，但eruda是直接在手機上調試頁面。

有什麼好處？若是非要說好處就是可以直接在手機上打開相似PC端開發者面板同樣的調試面板，主要用途是當PC端調試手機頁面和手機上運行時效果不一致時能夠直接在手機上調試。

示意圖(手機上調試效果圖)：

具體資料：https://www.oschina.net/p/eruda

目前我用的比較少，可是不失爲一種值得推薦的調試工具。總的來講，通常開發者都是直接在PC上調試頁面（不論是PC端頁面仍是手機端頁面），所以在開發過程當中推薦使用Chrome DevTools或者微信web開發者工具來調試，

固然有同窗說我用的是360瀏覽器，其實無論你用什麼瀏覽器除了內核差別，調試模式基本都和Chrome DevTools差很少；這裏我要說的是通常調試頁面時直接使用PC端來調試就能夠了，可是發如今真機上運行效果和預期不一致

則能夠採用Eruda來實現真機調試進而定位並解決問題。

 

以上工具並非互相獨立存在的，頗有可能須要多種方式聯合調試來解決一個問題，畢竟咱們不能把本身框死在一個工具裏，應該揚長避短；