在網頁上除錯手機上的APP

語言: CN / TW / HK

我們工作中常用遇到這樣的問題需要除錯手機裡的網頁,而在手機裡無法像chrome瀏覽器那樣直接除錯網頁,特別是一些閘道器加了限制,都禁止抓包除錯,之前常用的一種方式是需要翻牆的,不過後來翻牆也不好用了,方式如下:

常用方式

擴充套件應用adb的作用是把手機上的APP頁面用網頁的形式在電腦上開啟,開發人員便可根據自己的需求進行除錯。下面介紹擴充套件應用adb的使用。

(1)開啟谷歌瀏覽器的擴充套件應用視窗,如下圖:

因為我已經添加了adb應用,所以這裡不顯示“新增至CHROME”,沒有新增adb擴充套件應用的點選“+新增至CHROME”就可以了。

(2)新增完後,回到擴充套件應用的視窗,就會出現下面的圖示,表示新增成功:

 

會在瀏覽器的頁首處出現這樣的小圖示:

(3)點選小圖示,進入檢測手機的頁面:

(4)用usb連線手機,並且開啟手機的usb除錯選項。開啟設定---更多設定----開發者選項----USB除錯、USB安裝、USB除錯(安全設定)。如果找不到開發者選項,一般開啟設定---關於手機----連續點選(Android版本或者MIUI版本等,具體方式請百度解決)----更多設定---開發開發者選項----USB除錯、USB安裝、USB除錯(安全設定)。

(5)USB連線手機後,開啟要除錯的app,就會在網頁上顯示要除錯的連結,然後點選進入除錯視窗inspect:

(6)有時候出來的inspect是空白頁面(chrome://inspect/#devices)

說明您需要翻牆才能訪問,您就需要搜一下怎麼翻牆,或者直接購買vpn賬號進行除錯。

不需要翻牆的方式

這種方式需要瀏覽器Edge,在瀏覽器輸入edge://inspect/#devices即可。

展示效果如下:

點選inspect即可除錯手機上的網頁了,不過此方式需要在webview開啟除錯模式

webview.setWebContentsDebuggingEnabled

如果您這邊還有什麼方式可以推薦,歡迎留言交流。

關注我獲取更多知識或者投稿