2019了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試？
移動(dòng)端調(diào)試?yán)щy
很多時(shí)候，我們?cè)谶M(jìn)行移動(dòng)端開(kāi)發(fā)時(shí)，都是先在PC端使用手機(jī)模擬器進(jìn)行調(diào)試，沒(méi)有問(wèn)題后，我們才會(huì)在手機(jī)端的瀏覽器進(jìn)行測(cè)試，這個(gè)時(shí)候，如果沒(méi)有出現(xiàn)問(wèn)題，皆大歡喜。但是一旦出現(xiàn)問(wèn)題，我們就很難解決，因?yàn)槿狈梢暬慕缑?。不似在PC端，我們能直觀的去改變樣式，或者是進(jìn)行斷點(diǎn)調(diào)試。有時(shí)，在移動(dòng)端我們不得不借助于alert來(lái)調(diào)試，但是這樣的調(diào)試方法效率極其低下，很多時(shí)候，都是靠經(jīng)驗(yàn)，或者是靠排除法。甚至，我們不得不歸結(jié)為是瀏覽器的實(shí)現(xiàn)問(wèn)題。
那么，有什么什么方法，能夠讓我們調(diào)試移動(dòng)端的適配的時(shí)候，像調(diào)試PC端一樣直觀呢?本文旨在為你提供移動(dòng)端的調(diào)試方法，希望能夠?yàn)槟愦蜷_(kāi)新的一扇門(mén)。
本文會(huì)給出三種真機(jī)調(diào)試方法，你可以選擇自己最喜歡的一款~
移動(dòng)端真機(jī)調(diào)試方法
- chrome真機(jī)調(diào)試
- weinre調(diào)試
- spy-debugger調(diào)試
簡(jiǎn)單說(shuō)明一下每一種方式的優(yōu)缺點(diǎn)：
***種: chrome真機(jī)調(diào)試，有一個(gè)很大的局限性就是，只能調(diào)試手機(jī)端的chrome瀏覽器，對(duì)于UC，QQ這些瀏覽器均不適用，因此在調(diào)試兼容問(wèn)題時(shí)，幫助不大，但是***的優(yōu)點(diǎn)是: 簡(jiǎn)單快捷。
第二種: weinre調(diào)試方式，安裝和適用不復(fù)雜，適用于全平臺(tái)的調(diào)試，即任何手機(jī)的任何瀏覽器皆可以調(diào)試，不過(guò)需要手機(jī)和電腦在同一個(gè)網(wǎng)段下。
第三種:spy-debugger，安裝稍微復(fù)雜一點(diǎn)，spy-debugger集成了weinre，不過(guò)還增加了抓包工具，使用最為方便。
下面我們開(kāi)始具體介紹如何使用這三種調(diào)試方法：
1.chrome真機(jī)調(diào)試
手機(jī)端下載好chrome瀏覽器，使用USB連接到PC，打開(kāi)手機(jī)的USB調(diào)試模式。
然后在PC端打開(kāi)chrome瀏覽器，在地址欄輸入: chrome://inspect. 勾選"discovery usb device"。然后在手機(jī)端瀏覽網(wǎng)頁(yè)，就可以看到如下的頁(yè)面，點(diǎn)擊inspect，進(jìn)行調(diào)試。(鑒于我的工作電腦是加了域的，因?yàn)椴⒉荒苁褂眠@個(gè)方式，如果有和我一樣情況的童鞋，可以考慮使用另外兩種調(diào)試方式)
2.weinre真機(jī)調(diào)試
Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具，借助于網(wǎng)絡(luò)，可以在PC上直接調(diào)試運(yùn)行在移動(dòng)設(shè)備上的遠(yuǎn)程頁(yè)面。
本地服務(wù)器: 可以使用http-server、tomcat等,也可以使用編譯器集成的服務(wù)
weinre安裝
全局安裝: npm install –g weinre
局部安裝: npm install weinre
啟動(dòng): weinre --httpPort 8090 --boundHost -all-
如果是局部安裝的話(huà)，需要在前面加上 node_modules/.bin/
相信前端的童鞋都會(huì)用npm包管理工具，對(duì)于這個(gè)工具，我就不展開(kāi)了，如果沒(méi)有安裝npm的，自行安裝。
weinre啟動(dòng)參數(shù)說(shuō)明:
- httpPort: 設(shè)置Wninre使用的端口號(hào)，默認(rèn)是8080
- boundHost: [hostname | Ip | -all-]: 默認(rèn)是 ‘localhost’.
- debug [true | false] : 這個(gè)選項(xiàng)與–verbose類(lèi)似， 會(huì)輸出更多的信息。默認(rèn)為false。
- readTimeout [seconds] : Server發(fā)送信息到Target/Client的超時(shí)時(shí)間， 默認(rèn)為5s。
- deathTimeout [seconds] : 默認(rèn)為3倍的readTimeout， 如果頁(yè)面超過(guò)這個(gè)時(shí)間都沒(méi)有任何響應(yīng)， 那么就會(huì)斷開(kāi)連接。
8080端口使用情況較多，所以我選擇了指定8090端口。
啟動(dòng)了weinre之后，我們?cè)跒g覽器中輸入localhost:8090.顯示如下界面，表示已經(jīng)啟動(dòng)成功。
點(diǎn)擊debug client user interface，進(jìn)入調(diào)試頁(yè)面。
當(dāng)前的targets中內(nèi)容為空。
現(xiàn)在，我們需要做另外一點(diǎn)操作，在我們要調(diào)試的頁(yè)面中，增加一個(gè)腳本。
- <script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>
記住將localhost換成你的IP地址.
然后，我們?cè)诒镜貑?dòng)一個(gè)服務(wù)器，可以是IDE集成的服務(wù)器，或者是http-server,我使用的是http-server.啟動(dòng)之后，我們?cè)谑謾C(jī)端訪問(wèn)要調(diào)試的網(wǎng)頁(yè)。然后就會(huì)發(fā)現(xiàn)targets下面增加了記錄。
這時(shí)，我們就可以點(diǎn)擊Elements進(jìn)行調(diào)試。
修改樣式時(shí)，會(huì)在手機(jī)端即時(shí)生效，并且也可以查看控制臺(tái)信息，唯一一點(diǎn)就是，不能進(jìn)行斷點(diǎn)調(diào)試。
***，在調(diào)試結(jié)束之后，別忘記刪除嵌入的script。
除了這種方法之后，還介紹了在手機(jī)端保存一段Js代碼，在需要調(diào)試某個(gè)頁(yè)面時(shí)，點(diǎn)擊執(zhí)行JS,但是現(xiàn)在瀏覽器為了安全起見(jiàn)，已經(jīng)不再支持此方法。默認(rèn)的方法是搜索，而非執(zhí)行，所以不可取。
3.spy-debugger真機(jī)調(diào)試
***，再介紹一下spy-debugger方法。用這個(gè)方法，我們不再需要自己增加和刪除腳本。
Spy-debugger內(nèi)部集成了weinre，通過(guò)代理的方式攔截所有html自動(dòng)注入weinre所需的js代碼。簡(jiǎn)化了weinre需要給每個(gè)調(diào)試的頁(yè)面添加js代碼。spy-debugger原理是攔截所有html頁(yè)面請(qǐng)求注入weinre所需要的js代碼。讓頁(yè)面調(diào)試更加方便。
特性:
- 頁(yè)面調(diào)試+抓包
- 操作簡(jiǎn)單
- 支持HTTPS。
- spy-debugger內(nèi)部集成了weinre、node-mitmproxy、AnyProxy。
- 自動(dòng)忽略原生App發(fā)起的https請(qǐng)求，只攔截webview發(fā)起的https請(qǐng)求。對(duì)使用了SSL pinning技術(shù)的原生App不造成任何影響。
- 可以配合其它代理工具一起使用(默認(rèn)使用AnyProxy)
Spydebugger安裝與使用
1.安裝: 全局安裝 npm install –g spy-debugger
2.啟動(dòng): spy-debugger
3.設(shè)置手機(jī)的HTTP代理
代理的地址為 PC的IP地址 ，代理的端口為spy-debugger的啟動(dòng)端口(默認(rèn)端口為：9888)默認(rèn)端口是 9888。
如果要指定端口: spy-debugger –p 8888
Android設(shè)置步驟:設(shè)置 - WLAN - 長(zhǎng)按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級(jí) - 代理設(shè)置 - 手動(dòng)
iOS設(shè)置代理步驟：設(shè)置 - 無(wú)線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP代理手動(dòng)
4.手機(jī)安裝證書(shū)(node-mitmproxy CA根證書(shū))
***步：生成證書(shū)：
生成CA根證書(shū)，根證書(shū)生成在 /Users/XXX/node-mitmproxy/ 目錄下(Mac)。
- spy-debugger initCA
第二步：安裝證書(shū)：
把node-mitmproxy文件夾下的 node-mitmproxy.ca.crt 傳到手機(jī)上，點(diǎn)擊安裝即可。
Spy-debugger啟動(dòng)界面，同樣，在手機(jī)端刷新頁(yè)面之后，targets中會(huì)有記錄
以我曾經(jīng)做的京豆游戲的頁(yè)面展示一下效果，當(dāng)我們?cè)谑謾C(jī)上選中一個(gè)元素時(shí)，可以在電腦上看到相應(yīng)的信息，這樣我們就可以看出有可能是什么樣式不兼容導(dǎo)致了UI的異常了，同樣，還可以在控制臺(tái)中看到JS的log信息，對(duì)于移動(dòng)端調(diào)試來(lái)說(shuō)非常有幫助。
總結(jié):
- chrome inspect應(yīng)用場(chǎng)景有限
- weinre安裝簡(jiǎn)單，使用過(guò)程中需要增加和刪除script，如果調(diào)試頁(yè)面很多的情況下，不適用。
- spy-debugger安裝略復(fù)雜，但是使用過(guò)程非常愉快。
