手機web前端調(diào)試頁面的幾種方式
前言
PC端web頁面調(diào)試比較容易，這里主要說幾種移動端調(diào)試的方法，從簡單到復(fù)雜、從模擬調(diào)試到遠程調(diào)試，大概分為幾部分：
1、Chrome DevTools(谷歌瀏覽器)的模擬手機調(diào)試
2、weinre(web inspector remote)遠程調(diào)試工具
3、微信的“web開發(fā)者工具”，集成了Chrome DevTools和weinre，做的比較好
4、Chrome DevTools遠程調(diào)試Android和iOS頁面
5、Eruda——手機網(wǎng)頁前端調(diào)試面板
閱讀說明
本文不是小白文，需要一定前端基礎(chǔ)才能看懂；此外，本文并不是調(diào)試教程，很多細節(jié)并沒有截圖或者描述的很清楚，就如我說的已經(jīng)默認閱讀者懂得一些基本的調(diào)試方法；
我這里主要是對幾種調(diào)試方式進行匯總，方便自己也方便他人看完文章之后知道更多的調(diào)試方式；如果遇到哪一步自己看不懂可以百度或者評論區(qū)留言，謝謝！
1、Chrome DevTools模擬手機調(diào)試
直接使用谷歌瀏覽器的開發(fā)者工具，可以參照下圖，也可以使用快捷鍵F12或者ctrl+shift+I；個人覺得不管是哪個瀏覽器，直接先按下F12，一般都可以打開開發(fā)者工具，打不開再說嘛。
這種調(diào)試方式不僅能用于模擬手機調(diào)試還是主要的PC端頁面調(diào)試的方式，這里主要說用于手機調(diào)試。
打開后看到類似如下界面的開發(fā)者調(diào)試界面，Elements可以查看文檔元素，Console可以在線調(diào)試js和查看輸出結(jié)果，Sources可以調(diào)試JS和查看依賴資源，Network查看所有的網(wǎng)絡(luò)請求
在瀏覽器地址欄輸入要調(diào)試的頁面地址，選擇模擬設(shè)備，然后就可以選擇要調(diào)試的js調(diào)試了，右側(cè)面板中有調(diào)試操作按鈕；在Application面板中可以看到應(yīng)用存儲的數(shù)據(jù)Cookies什么的
如果沒有需要模擬的機型怎么辦？當然是增加了，打開DevTools的設(shè)置面板，左圖中的Setting點開會出現(xiàn)右圖，如下：
2、weinre(web inspector remote)遠程調(diào)試工具
weinre其實是在待調(diào)試的頁面中嵌入了一個特定的js，這樣頁面才能被weinre監(jiān)測到并能打開調(diào)試面板；要注意weinre的調(diào)試面板不能調(diào)試JS,也不支持打斷點調(diào)試，僅能用于調(diào)試頁面樣式，使用場景有限；
根據(jù)自己需要來選擇吧，具體的使用安裝過程參考：http://blog.csdn.net/freshlover/article/details/42640253；由于我使用的較少，也并不推薦這款工具，所以只是作為介紹和了解放在這里；如果想對weinre深入了解的自己參考鏈接中的內(nèi)容琢磨吧。
3、微信的“web開發(fā)者工具”
微信的web開發(fā)者工具，集成了谷歌的DevTools和weinre，可以說是上面兩點的集合，對于那些微信公眾號里面使用的H5網(wǎng)頁，這個是最好的選擇；
這個工具調(diào)試一般性的網(wǎng)頁就和谷歌瀏覽器調(diào)試一樣，看到的調(diào)試面板也差不多；但是如果要調(diào)試微信相關(guān)的功能比如：JS-SDK，權(quán)限列表等就必須使用這個工具了
工具下載地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN
除了使用url模擬調(diào)試外,微信的web工具也能對安卓手機進行遠程調(diào)試，目前最新版還不支持iOS遠程調(diào)試，打開設(shè)備監(jiān)視面板：
打開后看到如下界面，可以看到有一臺華為設(shè)備已經(jīng)連接，遠程調(diào)試要注意兩點：
1、手機和電腦使用usb連接，手機要開啟usb調(diào)試模式(不同手機不一樣)
2、手機上安裝最新版谷歌瀏覽器并打開
然后點擊inspect即可開始調(diào)試當前手機谷歌瀏覽器打開的頁面，這里不細說這個了，也沒必要細看，下面會詳細說明
再看看微信的移動調(diào)試，iOS提供的只有普通代理測試，Android除了代理測試，還有X5 Blink內(nèi)核調(diào)試；但是并不是所有手機都支持X5 Blink；所以普遍還是使用代理調(diào)試
手機的wifi網(wǎng)絡(luò)配置好代理后，點擊開始調(diào)試，出現(xiàn)監(jiān)控界面，發(fā)現(xiàn)其實就是使用的weinre來實現(xiàn)的，不過微信對其做了改進，相比直接使用 weinre 有以下優(yōu)點：
1、無須手工在頁面中加入 weinre 調(diào)試腳本，這點很方便
2、可以在 weinre 的網(wǎng)絡(luò)請求頁卡Network中，看到完整的http請求log，并且沒有只能看到ajax的局限
但是也有弊端，由于是微信開發(fā)的工具，移動調(diào)試只能調(diào)試微信App中打開的頁面而且并不是所有能在微信中打開的網(wǎng)頁都能調(diào)試，懷疑是工具內(nèi)部做了過濾
重啟微信后，在微信中訪問頁面，可以被監(jiān)測到，然后可以調(diào)試網(wǎng)頁樣式了，在Network頁卡中能看到每個請求的參數(shù)與響應(yīng)結(jié)果
總之，如果調(diào)試頁面是微信中的頁面(一般就是公眾號)使用微信提供的工具效率很高；如果是一般瀏覽器中的頁面也可以使用微信的Chrome DevTools但最好不用weinre
4、Chrome DevTools遠程調(diào)試Android和iOS頁面
電腦上安裝新版谷歌瀏覽器，然后地址欄輸入chrome://inspect會打開設(shè)備監(jiān)視頁面，這里可以監(jiān)視到iOS和Android設(shè)備，如果界面和圖中不一致請安裝最新版瀏覽器
Android:
前提：
1、手機和電腦使用usb連接，手機要開啟usb調(diào)試模式(不同手機不一樣)
2、手機上安裝最新版谷歌瀏覽器并打開
會發(fā)現(xiàn)設(shè)備監(jiān)視頁面多出了一個華為設(shè)備，并且能看到當前手機上谷歌瀏覽器打開的網(wǎng)頁的連接
a):可以在這里輸入手機要打開的url然后open，手機上顯示的當前頁面就會改變
b):inspect表示開始調(diào)試當前頁面，會打開調(diào)試面板(重要)
c):focus tab，表示讓手機顯示當前這個連接
d):reload表示重新加載頁面，也就是刷新
e):close表示關(guān)閉當前手機顯示的頁面
接下來，點擊inspect開始調(diào)試頁面，注意如果google瀏覽器不能翻|墻的話，這個調(diào)試頁面是打不開的，可以百度修改hosts文件翻|墻
然后就可以像調(diào)試PC端網(wǎng)頁一樣遠程調(diào)試手機網(wǎng)頁了
iOS(window系統(tǒng)上，如果是macbook系統(tǒng)忽略此部分):
可以參考：http://www.cnblogs.com/kelsen/p/6402477.html
前提：
1、電腦安裝iTunes軟件，不然蘋果手機不能正常被識別，安裝好后數(shù)據(jù)線連接手機和電腦
2、打開手機的設(shè)置——>Sarafi——>高級——>Web檢查器——>啟用(默認是關(guān)閉的，將其打開)
3、下載ios-webkit-debug-prox代理(32位或者64位)，其作用就是在Chrome和Sarafi之間建立了一個代理，便于電腦的Chrome檢測手機Sarafi打開的頁面
4、在cmd中執(zhí)行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌內(nèi)置的監(jiān)視器來調(diào)試(默認使用遠程的)
啟動后會監(jiān)聽9222端口，然后看到連接上了一臺名為jiba的iOS設(shè)備，括號中為設(shè)備的UDID；然后看谷歌瀏覽器是否檢查了這個端口，右圖中有9222端口即可，沒有就手動添加
此時打開手機Sarafi瀏覽器，打開百度首頁，發(fā)現(xiàn)瀏覽器能檢測到，沒看到就刷新這個監(jiān)視界面，一般來說會在3秒內(nèi)自動出現(xiàn)
點擊inspect同樣出現(xiàn)了調(diào)試面板，如下，發(fā)現(xiàn)iOS調(diào)試的面板不能看到手機屏幕在電腦上的投影，不過這并不影響調(diào)試；但是可能會遇到在調(diào)試js時斷點不生效的問題，
如果很不幸遇到這個問題的話，將圖中紅框中的按鈕連續(xù)點擊兩次——先禁用斷點再啟動即可恢復(fù)端點調(diào)試功能，不知道為什么，猜測是這個過程中恢復(fù)了斷點的狀態(tài)；這個問題很奇葩。
到這里使用Chrome調(diào)試iOS和Android就都完了，這種使用谷歌瀏覽器的方式，在Android上依賴于手機谷歌瀏覽器，在iOS上依賴Sarafi瀏覽器，受到具體軟件的限制；不過可以理解，畢竟遠程調(diào)試不如模擬調(diào)試簡單
5、Eruda——手機網(wǎng)頁前端調(diào)試面板
eruda是什么？正如標題所言，是用來在手機上調(diào)試頁面的，注意是在手機上不是在電腦上；前面說的幾種調(diào)試方式都是在電腦上模擬調(diào)試或者遠程調(diào)試手機頁面，但eruda是直接在手機上調(diào)試頁面。
有什么好處？如果非要說好處就是能夠直接在手機上打開類似PC端開發(fā)者面板一樣的調(diào)試面板，主要用途是當PC端調(diào)試手機頁面和手機上運行時效果不一致時可以直接在手機上調(diào)試。
示意圖(手機上調(diào)試效果圖)：
具體資料：https://www.oschina.net/p/eruda
目前我用的比較少，但是不失為一種值得推薦的調(diào)試工具。總的來說，一般開發(fā)者都是直接在PC上調(diào)試頁面(不管是PC端頁面還是手機端頁面)，因此在開發(fā)過程中推薦使用Chrome DevTools或者微信web開發(fā)者工具來調(diào)試，
當然有同學說我用的是360瀏覽器，其實不管你用什么瀏覽器除了內(nèi)核差異，調(diào)試模式基本都和Chrome DevTools差不多；這里我要說的是一般調(diào)試頁面時直接使用PC端來調(diào)試就可以了，但是發(fā)現(xiàn)在真機上運行效果和預(yù)期不一致
則可以采用Eruda來實現(xiàn)真機調(diào)試進而定位并解決問題。
以上工具并不是互相獨立存在的，很有可能需要多種方式聯(lián)合調(diào)試來解決一個問題，畢竟我們不能把自己框死在一個工具里，應(yīng)該揚長避短；文章來源：http://www.zghlxwxcb.cn/news/detail-488801.html
最后，由于本人是后臺工程師，對前端是處于業(yè)余愛好，經(jīng)驗有限，肯定還有很多我不知道的優(yōu)秀調(diào)試工具或者調(diào)試方式，知道的還請聯(lián)系我，大家互相促進提升。文章來源地址http://www.zghlxwxcb.cn/news/detail-488801.html
