干貨！移動(dòng)端真機(jī)調(diào)試指南，對(duì)調(diào)試說(shuō)easy

前言 ?前端開(kāi)發(fā)博客

這么快就年終了，回顧2021年發(fā)現(xiàn)沒(méi)干啥事，換了個(gè)城市，換了份工作，新公司新坑，現(xiàn)在主做Hybrid APP，那么年終就總結(jié)下移動(dòng)端的調(diào)試方案來(lái)劃劃水吧??

移動(dòng)端的真機(jī)調(diào)試，總結(jié)了下就大致就2種方法，要不就是網(wǎng)頁(yè)面注入js腳本，劫持console、網(wǎng)絡(luò)請(qǐng)求等，比如：vConsole、eruda等調(diào)試庫(kù)。要不就是使用抓包工具劫持瀏覽器與服務(wù)器的請(qǐng)求，比如：Charles，下面分享下我使用過(guò)的方法。

還可以看看這篇：H5 移動(dòng)端調(diào)試全攻略

1、alert大法

這有啥好說(shuō)的，(⊙﹏⊙)
推薦指數(shù)0顆星

2、抓包工具Charles、Fiddler

平時(shí)只用抓取各種網(wǎng)絡(luò)，需要設(shè)置手機(jī)的wifi代理
推薦指數(shù)2顆星

3、vConsole、eruda等調(diào)試庫(kù)

這個(gè)方法需要在頁(yè)面中插入一段 JS 腳本，這里以vConsole為例，導(dǎo)入vconsole.min.js，并實(shí)例化，注實(shí)例化代碼最好放在頭部，以便能一開(kāi)始就能劫持內(nèi)容：

??

或

npm?i?vconsole

import?VConsole?from?'vconsole';

new?VConsole();

優(yōu)點(diǎn)：方便，可查看console、network、elements等；
缺點(diǎn)：css調(diào)試不友好，console會(huì)劫持consloe的打印，不能定位到打印的代碼位置，需要額外加載js腳本

推薦指數(shù)3顆星

4、Chrome?+?Android

首先在chrome安裝ADB Plugin
chrome中輸入?chrome://inspect
通過(guò)數(shù)據(jù)線連接你的電腦和?Android?手機(jī)，打開(kāi)USB的調(diào)試模式
就可以在上面的頁(yè)面中看到自己的設(shè)備：

點(diǎn)擊inspect

然后就可以歡樂(lè)地調(diào)試了，和使用谷歌調(diào)試pc端一樣，可惜ios不適用 推薦指數(shù)4顆星

5、Mac?+?IOS?+?Safari

打開(kāi)手機(jī)點(diǎn)擊設(shè)置 -> Safari瀏覽器 -> 高級(jí)

打開(kāi)JavaScript和web檢查器。

打開(kāi)手機(jī)上的Safari，輸入一個(gè)網(wǎng)址 www.baidu.com

在Mac上打開(kāi)Safari，點(diǎn)擊開(kāi)發(fā)-iPhone lh- www.baidu.com，就可以看到以下頁(yè)面

注：app的webview也可以使用這個(gè)方法，只需要讓客戶端同學(xué)打包個(gè)debug版本

只適用ios，而且需要mac，而且有個(gè)缺點(diǎn)，沒(méi)有打開(kāi)調(diào)試窗口時(shí)，webview的網(wǎng)絡(luò)請(qǐng)求和console都不會(huì)記錄，webview關(guān)閉，調(diào)試窗口會(huì)直接關(guān)閉。推薦指數(shù)4顆星

6、whistle

安卓、ios都能調(diào)試，跨平臺(tái)、代理抓包、H5調(diào)試、debugger、請(qǐng)求劫持、HTTPS支持、WebSocket數(shù)據(jù)捕獲等，功能非常強(qiáng)大。weinre是用node編寫(xiě)的，使用npm來(lái)進(jìn)行安裝
安裝：

npm?install?-g?whistle

運(yùn)行：

w2?start

跨平臺(tái)、抓包、?DOM、Console、Network?等，功能非常強(qiáng)大。查看文檔^[1]
推薦指數(shù)5顆星

7、Mobile Debug

功能和whistle非常相似，我嚴(yán)重有理由懷疑Mobile Debug的開(kāi)發(fā)者就是在whistle的基礎(chǔ)上進(jìn)行開(kāi)發(fā)的。

`Mobile Debug`官網(wǎng)下載地址^[2]

下載安裝后

抓包：

網(wǎng)頁(yè)調(diào)試：

通過(guò)配置劫持規(guī)則將線上出bug的文件（如js）劫持到本地修改并調(diào)試：

需要把手機(jī)在同一個(gè)局域網(wǎng)wifi設(shè)置代理，便可使用，https需要增加安裝證書(shū)步驟。

推薦指數(shù)5顆星

最后 ?前端開(kāi)發(fā)博客

3和7是我現(xiàn)在主要使用的方法，用這就能完全解決移動(dòng)端的調(diào)試問(wèn)題。