CefSharp 使用 DevToolsClient 執行 Chrome DevTools Protocol(CDP) 方法，以及調試CDP

本文轉載自查看原文 2021-01-27 15:55 834 C#/ CefSharp

Chrome DevTools Protocol (CDP)是 Chrome 開始開放的一個WebSocket通信協議。

可以訪問 https://chromedevtools.github.io/devtools-protocol/ 官方文檔查看websocket通信時的各種接口調用參數。

接口通信使用json格式:

請求:

{
        "id": "消息ID",
        "method": "方法名稱",
        "params": {}
}

id: messageId,數字類型,不能為0，最好不要重復,要通過messageId區分響應信息

method: CDP 方法名稱(Browser.getVersion、Page.getResourceTree...)

params: 請求方法參數

響應:

{
    “id”: "請求時傳入的消息Id" ,
    "result": {}
}

開發者工具的所有操作都是遵循的這個協議，也就是說可以通過這個協議，繞開chrome 各種限制(ಥ_ಥ),比如獲取網頁所有標簽詳細信息(包括嵌套的iframe)。

執行Chrome DevTools Protocol 方法:

DevToolsClient 是CefSharp 專門對 CDP 接口做的的封裝(Page、DOM、Browser...等等)，或者通過ExecuteDevToolsMethodAsync手動執行方法：

聲明DevToolsClient全局變量:

//聲明全局變量
DevToolsClient devTool = null;
//添加ChromiumWebBrowser初始化事件,初始化時賦值
private void Form1_Load(object sender, EventArgs e)
{
    DevToolsClient chromiumWebBrowser1.IsBrowserInitializedChanged += new EventHandler(delegate {
        devTool = chromiumWebBrowser1.GetBrowser().GetDevToolsClient();
    });
}

執行自定義方法:

//添加一個執行方法
public async Task<string> ExecuteDevToolsMethods(string method, IDictionary<string, object> param = null)
{
       DevToolsMethodResponse resp = await devTool.ExecuteDevToolsMethodAsync(method, param);
       return resp.ResponseAsJsonString;
}
//執行
private void button1_Click(object sender, EventArgs e)
{
    ExecuteDevToolsMethods("DOM.getDocument").ContinueWith(new Action<Task<string>>((result) =>
    {
        Console.WriteLine(result.Result);
    }));
}

注意: 不要使用Wait()等待函數,不然會導致卡死

或者使用CefSharp封裝好的對象調用:

private async void button1_Click(object sender, EventArgs e)
{
    await devTool.Browser.GetVersionAsync().ContinueWith(new Action<Task<GetVersionResponse>>((resp)=> {
        Console.WriteLine(resp);
    }));
}

如果使用CefSharp封裝對象調用時，需要在執行方法體上添加async/await,才不會導致程序卡死。

可以看一下 stackoverflow 中鎖死的幾種情況：https://stackoverflow.com/questions/65895251/cefsharp-use-devtoolsclient-execute-method-after-call-wait-function-waiting/65895577?noredirect=1#comment116512155_65895577

不熟悉async/await的原理，如果各位有好的處理建議，請留言，非常感謝！

調試CDP接口:

配置CefSettings, 指定CefSharp 啟動時打開遠程調試端口:

CefSettings _settings = new CefSettings();
_settings.RemoteDebuggingPort = 32999;
Cef.Initialize(_settings);

一定要在創建窗體時執行配置全局CefSettings配置:

        public Form1()
        {
            InitializeComponent();
            CefSettings _settings = new CefSettings();
            _settings.RemoteDebuggingPort = 32999;//調試端口,一會程序啟動后，需要訪問這個端口
            Cef.Initialize(_settings);
        }

如果在其他地方配置時會報(暫時還沒找到原因...):

CEF can only be initialized once per process. This is a limitation of the underlying CEF/Chromium framework. You can change many (not all) settings at runtime through RequestContext.SetPreference.

這時啟動程序，不出意外的話，直接訪問: {ip}:{port}(localhost:32999)：