移動端調(diào)試?yán)щy

很多時候述么，我們在進(jìn)行移動端開發(fā)時蝌数，都是先在PC端使用手機(jī)模擬器進(jìn)行調(diào)試，沒有問題后碉输，我們才會在手機(jī)端的瀏覽器進(jìn)行測試，這個時候亭珍，如果沒有出現(xiàn)問題敷钾，皆大歡喜。但是一旦出現(xiàn)問題肄梨，我們就很難解決阻荒，因為缺乏可視化的界面。不似在PC端众羡，我們能直觀的去改變樣式侨赡，或者是進(jìn)行斷點調(diào)試。有時粱侣，在移動端我們不得不借助于alert來調(diào)試羊壹，但是這樣的調(diào)試方法效率極其低下，很多時候齐婴，都是靠經(jīng)驗油猫，或者是靠排除法。甚至柠偶，我們不得不歸結(jié)為是瀏覽器的實現(xiàn)問題情妖。

那么，有什么什么方法诱担，能夠讓我們調(diào)試移動端的適配的時候毡证，像調(diào)試PC端一樣直觀呢？本文旨在為你提供移動端的調(diào)試方法蔫仙，希望能夠為你打開新的一扇門料睛。

本文會給出三種真機(jī)調(diào)試方法，你可以選擇自己最喜歡的一款~

移動端真機(jī)調(diào)試方法

1. chrome真機(jī)調(diào)試
2. weinre調(diào)試
3. spy-debugger調(diào)試

簡單說明一下每一種方式的 優(yōu)缺點：

第一種：chrome真機(jī)調(diào)試，有一個很大的局限性就是秦效，只能調(diào)試手機(jī)端的chrome瀏覽器雏蛮，對于UC，QQ這些瀏覽器均不適用阱州，因此在調(diào)試兼容問題時挑秉，幫助不大，但是最大的優(yōu)點是: 簡單快捷苔货。

第二種：weinre調(diào)試方式犀概，安裝和適用不復(fù)雜，適用于全平臺的調(diào)試夜惭，即任何手機(jī)的任何瀏覽器皆可以調(diào)試姻灶，不過需要手機(jī)和電腦在同一個網(wǎng)段下。

第三種：spy-debugger诈茧，安裝稍微復(fù)雜一點产喉，spy-debugger集成了weinre，不過還增加了抓包工具敢会，使用最為方便曾沈。

下面我們開始具體介紹如何使用這三種調(diào)試方法。

1. chrome真機(jī)調(diào)試

手機(jī)端下載好chrome瀏覽器鸥昏，使用USB連接到PC塞俱，打開手機(jī)的USB調(diào)試模式。

然后在PC端打開chrome瀏覽器吏垮，在地址欄輸入：chrome://inspect. 勾選"discovery usb device"障涯。然后在手機(jī)端瀏覽網(wǎng)頁，就可以看到如下的頁面膳汪，點擊inspect唯蝶，進(jìn)行調(diào)試(鑒于我的工作電腦是加了域的，因為并不能使用這個方式遗嗽，如果有和我一樣情況的童鞋生棍，可以考慮使用另外兩種調(diào)試方式)。

chrome真機(jī)調(diào)試

2. wenire真機(jī)調(diào)試

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具媳谁，借助于網(wǎng)絡(luò)涂滴，可以在PC上直接調(diào)試運行在移動設(shè)備上的遠(yuǎn)程頁面。

wenire真機(jī)調(diào)試

本地服務(wù)器：可以使用http-server晴音、tomcat等羹饰，也可以使用編譯器集成的服務(wù)夺姑。

weinre安裝

全局安裝：

npm install –g weinre

局部安裝：

npm install weinre

啟動：

weinre --httpPort 8090 --boundHost -all-

如果是局部安裝的話鳍征，需要在前面加上 node_modules/.bin/狼讨。

相信前端的童鞋都會用npm包管理工具，對于這個工具，我就不展開了郭计，如果沒有安裝npm的霸琴，自行安裝。

weinew啟動參數(shù)說明

• httpPort：設(shè)置Wninre使用的端口號昭伸，默認(rèn)是8080梧乘。
• boundHost：[hostname | Ip | -all-]: 默認(rèn)是 ‘localhost’。
• debug [true | false]：這個選項與–verbose類似庐杨， 會輸出更多的信息选调。默認(rèn)為false。
• readTimeout [seconds]：Server發(fā)送信息到Target/Client的超時時間灵份， 默認(rèn)為5s仁堪。
• deathTimeout [seconds]：默認(rèn)為3倍的readTimeout， 如果頁面超過這個時間都沒有任何響應(yīng)填渠， 那么就會斷開連接弦聂。

8080端口使用情況較多，所以我選擇了指定8090端口氛什。

啟動了weinre之后莺葫，我們在瀏覽器中輸入localhost:8090，顯示如下界面屉更，表示已經(jīng)啟動成功徙融。

啟動成功

點擊debug client user interface洒缀，進(jìn)入調(diào)試頁面瑰谜。

調(diào)試頁面

當(dāng)前的targets中內(nèi)容為空。

現(xiàn)在树绩，我們需要做另外一點操作萨脑，在我們要調(diào)試的頁面中，增加一個腳本饺饭。

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

記住將localhost換成你的IP地址.

然后渤早，我們在本地啟動一個服務(wù)器，可以是IDE集成的服務(wù)器瘫俊，或者是http-server,我使用的是http-server.啟動之后鹊杖，我們在手機(jī)端訪問要調(diào)試的網(wǎng)頁。然后就會發(fā)現(xiàn)targets下面增加了記錄扛芽。

這時骂蓖，我們就可以點擊Elements進(jìn)行調(diào)試。

進(jìn)行調(diào)試

修改樣式時川尖，會在手機(jī)端即時生效登下，并且也可以查看控制臺信息，唯一一點就是，不能進(jìn)行斷點調(diào)試被芳。

最后缰贝，在調(diào)試結(jié)束之后，別忘記刪除嵌入的script畔濒。

除了這種方法之后剩晴，還介紹了在手機(jī)端保存一段Js代碼，在需要調(diào)試某個頁面時篓冲，點擊執(zhí)行JS,但是現(xiàn)在瀏覽器為了安全起見李破，已經(jīng)不再支持此方法。默認(rèn)的方法是搜索壹将，而非執(zhí)行嗤攻，所以不可取。

3. spy-debugger真機(jī)調(diào)試

最后诽俯，再介紹一下spy-debugger方法妇菱。用這個方法，我們不再需要自己增加和刪除腳本暴区。

Spy-debugger內(nèi)部集成了weinre闯团，通過代理的方式攔截所有html自動注入weinre所需的js代碼。簡化了weinre需要給每個調(diào)試的頁面添加js代碼仙粱。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼房交。讓頁面調(diào)試更加方便。

特性：

1. 頁面調(diào)試＋抓包
2. 操作簡單
3. 支持HTTPS伐割。
4. spy-debugger內(nèi)部集成了weinre候味、node-mitmproxy、AnyProxy隔心。
5. 自動忽略原生App發(fā)起的https請求白群，只攔截webview發(fā)起的https請求。對使用了SSL pinning技術(shù)的原生App不造成任何影響硬霍。
6. 可以配合其它代理工具一起使用(默認(rèn)使用AnyProxy)

Spydebugger安裝與使用

全局安裝：

npm install –g spy-debugger

啟動：

spy-debugger

設(shè)置手機(jī)的HTTP代理：

• 代理的地址為PC的IP地址帜慢，代理的端口為spy-debugger的啟動端口(默認(rèn)端口為：9888)默認(rèn)端口是 9888。
• 如果要指定端口： spy-debugger–p8888唯卖。
• Android設(shè)置步驟：設(shè)置 - WLAN - 長按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級 - 代理設(shè)置 - 手動粱玲。
• iOS設(shè)置代理步驟：設(shè)置 - 無線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP代理手動。

手機(jī)安裝證書(node-mitmproxy CA根證書)：

第一步：生成證書

生成CA根證書拜轨，根證書生成在 /Users/XXX/node-mitmproxy/ 目錄下(Mac)抽减。

spy-debugger initCA

第二步：安裝證書

把node-mitmproxy文件夾下的 node-mitmproxy.ca.crt 傳到手機(jī)上，點擊安裝即可撩轰。

Spy-debugger啟動界面胯甩，同樣昧廷，在手機(jī)端刷新頁面之后，targets中會有記錄偎箫。

記錄

以我曾經(jīng)做的京豆游戲的頁面展示一下效果木柬，當(dāng)我們在手機(jī)上選中一個元素時，可以在電腦上看到相應(yīng)的信息淹办，這樣我們就可以看出有可能是什么樣式不兼容導(dǎo)致了UI的異常了眉枕，同樣，還可以在控制臺中看到JS的log信息怜森，對于移動端調(diào)試來說非常有幫助速挑。

京豆游戲

總結(jié)

1. chrome inspect應(yīng)用場景有限。
2. weinre安裝簡單副硅，使用過程中需要增加和刪除script姥宝，如果調(diào)試頁面很多的情況下，不適用恐疲。
3. spy-debugger安裝略復(fù)雜腊满，但是使用過程非常愉快。

看完文章培己，還有福利拿哦碳蛋，往下看??????
感興趣的小伙伴可以在公號【grain先森】后臺回復(fù)【190315】獲取【Css 參考規(guī)范】，可以轉(zhuǎn)發(fā)朋友圈和你的朋友分享哦省咨。