干貨！移動(dòng)端真機(jī)調(diào)試指南，對調(diào)試說easy
點(diǎn)擊上方?前端瓶子君，關(guān)注公眾號
回復(fù)算法，加入前端編程面試算法每日一題群
前言
這么快就年終了，回顧2021年發(fā)現(xiàn)沒干啥事，換了個(gè)城市，換了份工作，新公司新坑，現(xiàn)在主做Hybrid APP，那么年終就總結(jié)下移動(dòng)端的調(diào)試方案來劃劃水吧??
移動(dòng)端的真機(jī)調(diào)試，總結(jié)了下就大致就2種方法，要不就是網(wǎng)頁面注入js腳本，劫持console、網(wǎng)絡(luò)請求等，比如：?vConsole、eruda等調(diào)試庫。要不就是使用抓包工具劫持瀏覽器與服務(wù)器的請求，比如：Charles，下面分享下我使用過的方法。
1、alert大法
這有啥好說的，(⊙﹏⊙)
推薦指數(shù)0顆星
2、抓包工具Charles、Fiddler
平時(shí)只用抓取各種網(wǎng)絡(luò)，需要設(shè)置手機(jī)的wifi代理
推薦指數(shù)2顆星
3、vConsole、eruda等調(diào)試庫
這個(gè)方法需要在頁面中插入一段 JS 腳本，這里以vConsole為例，導(dǎo)入vconsole.min.js，并實(shí)例化，注實(shí)例化代碼最好放在頭部，以便能一開始就能劫持內(nèi)容：
<script?src="./vconsole.min.js">script>
??<script>
????//?初始化
????new?VConsole();
??script>
復(fù)制代碼
或
npm?i?vconsole
復(fù)制代碼
import?VConsole?from?'vconsole';
new?VConsole();
復(fù)制代碼
優(yōu)點(diǎn)：方便，可查看console、network、elements等；
缺點(diǎn)：css調(diào)試不友好，console會劫持consloe的打印，不能定位到打印的代碼位置，需要額外加載js腳本
推薦指數(shù)3顆星
4、Chrome?+?Android
首先在chrome安裝ADB Plugin
chrome中輸入?chrome://inspect
通過數(shù)據(jù)線連接你的電腦和?Android?手機(jī)，打開USB的調(diào)試模式
就可以在上面的頁面中看到自己的設(shè)備：
點(diǎn)擊inspect
然后就可以歡樂地調(diào)試了，和使用谷歌調(diào)試pc端一樣，可惜ios不適用 推薦指數(shù)4顆星
5、Mac?+?IOS?+?Safari
打開手機(jī)點(diǎn)擊設(shè)置 -> Safari瀏覽器 -> 高級
打開JavaScript和web檢查器。
打開手機(jī)上的Safari，輸入一個(gè)網(wǎng)址www.baidu.com[1]
在Mac上打開Safari，點(diǎn)擊開發(fā)-iPhone lh-www.baidu.com，[2]?就可以看到以下頁面
注：app的webview也可以使用這個(gè)方法，只需要讓客戶端同學(xué)打包個(gè)debug版本
只適用ios，而且需要mac，而且有個(gè)缺點(diǎn)，沒有打開調(diào)試窗口時(shí)，webview的網(wǎng)絡(luò)請求和console都不會記錄，webview關(guān)閉，調(diào)試窗口會直接關(guān)閉。推薦指數(shù)4顆星
6、whistle
安卓、ios都能調(diào)試，跨平臺、代理抓包、H5調(diào)試、debugger、請求劫持、HTTPS支持、WebSocket數(shù)據(jù)捕獲等，功能非常強(qiáng)大。weinre是用node編寫的，使用npm來進(jìn)行安裝
安裝：
npm?install?-g?whistle
復(fù)制代碼
運(yùn)行：
w2?start
復(fù)制代碼
跨平臺、抓包、?DOM、Console、Network?等，功能非常強(qiáng)大。查看文檔[3]
推薦指數(shù)5顆星
7、Mobile Debug
功能和whistle非常相似，我嚴(yán)重有理由懷疑Mobile Debug的開發(fā)者就是在whistle的基礎(chǔ)上進(jìn)行開發(fā)的。
`Mobile Debug`官網(wǎng)下載地址[4]
下載安裝后
抓包：
網(wǎng)頁調(diào)試：
通過配置劫持規(guī)則將線上出bug的文件（如js）劫持到本地修改并調(diào)試：
需要把手機(jī)在同一個(gè)局域網(wǎng)wifi設(shè)置代理，便可使用，https需要增加安裝證書步驟。
推薦指數(shù)5顆星
最后
3和7是我現(xiàn)在主要使用的方法，用這就能完全解決移動(dòng)端的調(diào)試問題。
來自:咸魚翻身翻兩次
https://juejin.cn/post/7041049806562656293