1、Chrome Inspect介紹
Chrome Inspect
定位工具是用來抓取app中Webview頁面的。
爲了項目的需求,爲了更好的保證效果和佈局跨平臺,Android&H5混合開發一般是我們不錯的選擇。Google瀏覽器中的Chrome Inspect
定位工具,提供了一個移動端Web頁面開發調試的功能,通過它我們可以調試手機頁面,可以看到頁面的源碼,從而進行元素的定位。
使用Chrome Inspect
定位工具的前提條件
使用Chrome開發人員工具調試原生Android應用中的WebView,Android版本應該在Android4.4(KitKat)或更高版本上,通過DevTools在原生Android應用中調試WebView頁面中的內容。
2、Chrome Inspect打開方式
打開PC端的Chrome瀏覽器,在訪問地址欄中輸入chrome://inspect/
就可以了,就是這麼簡單。
如下圖:
3、Chrome Inspect工具的使用
(1)Chrome Inspect工作前提
所測試設備是開機狀態(手機或者模擬器)。
-
確保電腦與設備是鏈接狀態,也就是
cmd進入命令行終端,
輸入adb connect 127.0.0.1:21503
鏈接逍遙模擬器,
輸入adb devices
能夠獲取設備名稱。
(2)Chrome Inspect操作
1)在APP中打開含有Webview的頁面
例如:開百度APP,進入到微博登陸的界面就是一個含有Webview的頁面。
如下圖:
2)在Chrome Inspect中識別到Webview頁面
我們進入到PC端的Chrome瀏覽器中,訪問地址欄中輸入chrome://inspect/
(沒有顯示的話就點擊一下刷新),就可以檢測到當前應用程序界面是Webview頁面了。
如下圖:
3)點擊inspect可以進入調試視圖
點擊如上圖中的inspect
,可以進入Chrome Inspect
工具的調試視圖 .
會彈出一個新窗口,顯示當前頁面的Webview元素信息。
並且元素定位方法同Selenium WebDriver一致。
就是這麼簡單。
4、使用Chrome Inspect遇到的問題
(1)Android系統版本
Android移動設備版本應該在Android4.4或更高版本上。
從Android 4.4開始,webkit是支持遠程調試的。
(2)所測App的debug模式要打開
在使用Chrome Inspect
工具調試移動端APP的Webview頁面的時候,需要將該App的debug模式打開。
但其實大部分App的debug模式都是關閉的,要去找一個開啓debug模式的版本還是比較麻煩的。
因此需要使用藉助第三方工具來強制開啓任何App的Android webview debug模式,使之可以使用Chrome Inspect。
而這個工具就是Xposed
。
(3)Xposed工具的安裝
1、將設備進行root
因爲涉及到root權限,因此需要將設備進行root。
有很多工具可以來root,比如KingRoot等。
注:Android模擬器默認root。
2、下載Xposed框架
官方下載地址:http://repo.xposed.info/module/de.robv.android.xposed.installer
點擊頁面下方的Show older versions
,選擇一個穩定版本進行下載。
3、安裝Xposed框架
將下載好的Xposed安裝包de.robv.android.xposed.installer_v32_de4f0d.apk
,直接拖入到Android模擬器中,進行安裝。
安裝好後如下圖:
3、安裝/更新Xposed框架
打開 Xposed Installer,選擇“安裝/更新”的最新版,然後點“安裝”會自動下載刷入。(過程可能會有一些慢)
安裝界面
安裝更新完成後的界面,如下圖:
4、安裝Xposed webview debugging模塊
打開Xposed界面中點擊左上角的三條橫槓,選擇模塊,然後啓用需激活模塊的複選框,正常重啓後即可使用。
如果你的手機中沒有安裝WebViewDebugHook模塊或者沒有任何模塊,如下圖。
可以在Xposed中進行下載安裝WebViewDebugHook模塊。
然後按照上面的方式激活WebViewDebugHook模塊即可。
(4)HTTP/1.1 404 Not Found和空白頁問題
在chrome://inspect/#devices
中點擊inspect
出現的窗口中,界面是出現HTTP/1.1 404 Not Found
或者是空白頁的現象。
如下圖:
空白頁
HTTP/1.1 404 Not Found
界面
原因:
對於國內的程序猿來說,由於無法訪問 https://chrome-devtools-frontend.appspot.com,就會出現出現HTTP/1.1 404 Not Found
或者空白頁面的現象
例如上面的@33f6ad690e178169a17596eeec8596751a696d1e
就是移動設備中瀏覽器的一個版本號,當你換一個手機或模擬器的時候,版本號可能就不一樣了。
因爲不同型號的手機生產商可能會打包不同版本的chrome瀏覽器內核,Chrome Inspect
定位工具就會先訪問 https://chrome-devtools-frontend.appspot.com,下載對應的chrome-devtools
相關驅動,而國內無法訪問並下載這些驅動,就出現了404和空白頁。
網上找到如下三種解決方式:
方法一:下載devtools 的inspect的 離線開發者調試工具包。(花錢,沒有免費的)
方法二: 修改網絡連接,修改hosts文件。
方法三:使用第三方的chromium內核的瀏覽器,如QQ瀏覽器。
(都不好使,大家也可以自己試試)
推薦使用VPN,或者下載一個可FQ的谷歌瀏覽器用一下即可,不用的時候就關了。
(5)補充:安卓模擬器打開開發者選項
打開手機的“設置”,進入到“設置”頁面;
滑到“設置”頁面的最下端,找到“關於手機”,進入到“關於手機”頁面;
找到“版本號”,連續點擊。
會彈出一段文字提醒,直到提醒次數爲0後,結束點擊。
返回“設置”界面,開發者選項就出來了。