通過 Chrome devtools protocol 和 adb 調試 Android Webview

這個技術可以用於 UI 自動化等，用腳本自動控制 Android  webview 或注入 js 執行。

 

 

前提條件：usb 連接手機，adb 能查找到 devices，如果有問題，多拔插幾次，確認授權。

 

第一步，確認安卓 App 編譯時已經啟用了webview 允許調試（一般是允許的，可以通過連接usb，打開chrome的inspect頁面（ chrome://inspect/#devices），能連上就表示允許調試了）

 

第二步，查找進程 pid

使用命令： adb shell grep -a webview_devtools_remote /proc/net/unix

 

 

第三步，綁定進程消息到電腦的端口

使用命令： adb forward tcp:9222 localabstract:webview_devtools_remote_{pid}

 

第四步，驗證綁定情況。

使用命令： curl localhost:9222/json/version

使用命令： curl localhost:9222/json/list

可以獲得當前網頁信息和調試用的websocket鏈接

 

 

第五步，通過websocket發送CDP（chrome devtools protocol）指令（使用上述 list 出來的頁面 webSocketDebuggerUrl）

下邊的是 nodejs 代碼，引用了 ws npm包。

var wsURL = 'ws://127.0.0.1:9222/devtools/page/F4C53489B38E9B2785C62085DCB75FB9';
function ws() {
    var WebSocket = require('ws');
    const ws = new WebSocket(wsURL);
 
    ws.on('open', function open() {
        ws.send(JSON.stringify({"id": 1, "method": "Runtime.evaluate", "params": {"expression": "window.location.toString()"}}));
    });
 
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });
}
ws();

打印結果：received: {"id":1,"result":{"result":{"type":"string","value":" https://games.shopee.co.id/pet/?activity=23cb19698abc84fa"}}}

 

再往后，可以使用一些現成的高級別api庫，例如puppeteer實際就是基於CDP的一個庫，但它只支持內置的chromium，無法用來調試外部瀏覽器。

按介紹說， https://github.com/cyrus-and/chrome-remote-interface 是一個相關的庫，但實際使用時總無法連上ws。

 

如果直接更成熟的整套體系，例如 Appium，那就更方便了，這種工具已經把上述流程都內置了，參考：https://appium.io/docs/en/writing-running-appium/web/hybrid/ 

 

 

參考資料：

https://github.com/cyrus-and/chrome-remote-interface/

https://chromedevtools.github.io/devtools-protocol/

https://testerhome.com/topics/19461