如何检测CefSharp中DevTools加载完成？

我之前在项目里也碰到过这个异步加载的坑——ShowDevTools()确实是异步执行的，直接在它之后调用页面加载，经常会出现DevTools还没准备好就开始加载页面的情况，导致调试器抓不到初始的JS执行。分享下我实测有效的解决方案：

核心思路 #

利用CefSharp的DevToolsClient和调试器的异步API，等待JS调试器成功挂载后再触发页面加载，而不是单纯等DevTools窗口显示出来。

具体实现代码 #

假设你已经有一个初始化好的ChromiumWebBrowser实例（命名为browser），可以这么写：

// 监听浏览器初始化完成事件，确保操作在浏览器就绪后执行
browser.IsBrowserInitializedChanged += async (sender, e) =>
{
    if (e.IsBrowserInitialized)
    {
        // 调出DevTools窗口
        browser.ShowDevTools();
        
        // 获取DevTools客户端实例，用于和DevTools通信
        var devToolsClient = browser.GetDevToolsClient();
        
        try
        {
            // 等待JS调试器成功附加到浏览器进程——这一步是关键
            await devToolsClient.Debugger.AttachAsync();
            
            // 确认调试器挂载完成后，再加载目标页面
            browser.Load("https://your-target-page.com");
        }
        catch (Exception ex)
        {
            // 处理可能的异常（比如DevTools连接失败）
            Console.WriteLine($"调试器挂载失败: {ex.Message}");
            // 可选：失败时直接加载页面，避免阻塞流程
            browser.Load("https://your-target-page.com");
        }
    }
};

额外说明 #

• Debugger.AttachAsync()会等待DevTools的调试器完全就绪，这时候不仅DevTools窗口已经加载，JS调试器也已经完成挂载，能捕获页面从加载开始的所有JS执行细节。
• 如果你的场景只需要等待DevTools窗口加载完成（不需要调试器就绪），可以监听DevTools窗口的LoadCompleted事件，但对于需要调试初始JS的场景，还是推荐上面的调试器附加方案。
• 注意要在异步方法里执行这些操作，避免阻塞UI线程。

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