使用chrome-remote-interface连接Android WebView出现socket hang up错误如何解决

你遇到的socket hang up错误本质是chrome-remote-interface没有连接到正确的Chrome DevTools Protocol (CDP) 端点，具体诱因通常是以下几种：

• 你直接把转发后的9483端口作为连接参数，但该端口返回的是DevTools的调试目标列表页面，不是CDP协议需要的WebSocket端点，chrome-remote-interface默认找不到可用的连接目标就会中断连接
• 转发的进程ID对应多个可调试WebView页面，未指定具体调试目标导致连接失败
• chrome-remote-interface版本和WebView对应的Chromium内核版本不兼容
• 端口转发配置有疏漏

第一步：确认调试目标端点 #

先在浏览器访问 http://localhost:9483/json/list，你会得到所有可调试WebView页面的JSON列表，找到你要调试页面对应的webSocketDebuggerUrl字段，值通常为ws://localhost:9483/devtools/page/[随机ID]，记录下后面的/devtools/page/[随机ID]路径。

第二步：修改CDP初始化参数 #

给CDP构造函数传入target参数指定具体调试端点，修改后的代码如下：

const CDP = require('chrome-remote-interface');

async function run() {
    let client;
    try {
        // 新增target参数，值为你第一步拿到的路径，也可以直接填完整的ws地址
        client = await CDP({
            port: 9483,
            host: 'localhost',
            target: '/devtools/page/[你拿到的页面ID]'
        });
        const {Network, Page} = client;
        console.log("working")
    } catch (err) {
        console.error(err);
    } finally {
        if (client) {
            await client.close();
        }
    }
}

run()

如果只有一个可调试目标，也可以自动获取目标ID，不用手动复制：

const CDP = require('chrome-remote-interface');
const fetch = require('node-fetch');

async function run() {
    let client;
    try {
        // 自动获取第一个可调试目标
        const targetList = await fetch('http://localhost:9483/json/list').then(res => res.json());
        const firstTarget = targetList[0];
        client = await CDP({
            port: 9483,
            target: firstTarget.webSocketDebuggerUrl
        });
        const {Network, Page} = client;
        console.log("working")
    } catch (err) {
        console.error(err);
    } finally {
        if (client) {
            await client.close();
        }
    }
}

run()

其他兼容问题排查 #

• 确认端口转发命令正确，完整命令为 adb forward tcp:9483 localabstract:webview_devtools_remote_<你的进程ID>，不要漏开头的adb前缀
• 如果WebView内核版本低于Chromium 80，可降级chrome-remote-interface到0.31.x兼容版本
• 确认你调试的WebView已经开启了setWebContentsDebuggingEnabled(true)配置，且你获取的进程ID对应该WebView所属的APP进程

内容的提问来源于stack exchange，提问作者Technik_Max