Search code examples
c#.netwpfwebview2chrome-devtools-protocol

WebView2 DevToolsProtocolEvent not raising


I'm trying to create an app that uses the WebView2 WPF component. Currently I'm working on logging the messages and errors that are written by the javascript code of the websites using console.log().

This is what I have right now:

public partial class WebView2BrowserControl : WebView2
{
    private async void OnWebViewLoaded(object sender, RoutedEventArgs e)
    {
        await EnsureCoreWebView2Async();
        if (showDeveloperTools)
        {
            CoreWebView2.GetDevToolsProtocolEventReceiver("Log.entryAdded").DevToolsProtocolEventReceived += OnConsoleMessage;
            CoreWebView2.OpenDevToolsWindow();
        }
        else
        {
            CoreWebView2.Settings.AreDevToolsEnabled = false;
        }
    }

    private void OnConsoleMessage(object sender, CoreWebView2DevToolsProtocolEventReceivedEventArgs e)
    {
        if (e != null && e.ParameterObjectAsJson != null)
        {
            Trace.WriteLine("WebView2:" + e.ParameterObjectAsJson);
        }
    }
}

As you can see, I'm using the GetDevToolsProtocolEventReceiver method to subscribe to events in the DevTools. The documentation states the following:

eventName:String - The full name of the event in the format {domain}.{event}. For more information about DevToolsProtocol events description and event args, navigate to DevTools Protocol Viewer.

...And acording to the DevTools Protocol Viewer the event that I'm looking for is Log.entryAdded.

Now the problem is that while the GetDevToolsProtocolEventReceiver("Log.entryAdded") call does not throw any exception the event is never raised, even if I can see things being logged in DevTools. I even tried writing my own console.log() calls in the DevTools window.

Other things that I've tried:

  • using both the Evergreen Standalone Installer which installs WebView2 on the machine or the Fixed Version (both 87 and 88 versions) which is basically a portable version of WebView2
  • using both latest stable version of Microsoft.Web.View2.Core.dll from NuGet which is 1.0.705.50 and latest pre-release version
  • using both Log.entryAdded event and Console.messageAdded (deprecated)
  • subscribing to the event after I open the DevTools window

So what am I doing wrong?


Solution

  • You're close!

    It turns out, you have to enable the protocol event, or it will not be called.

    Just enable it after you you have added the event listener, like this:

    CoreWebView2.GetDevToolsProtocolEventReceiver("Log.entryAdded").DevToolsProtocolEventReceived += ConsoleMessage;
    await CoreWebView2.CallDevToolsProtocolMethodAsync("Log.enable", "{}");
    

    Now you should get messages in your trace.

    Alternative for Windows Forms (after you have installed and dropped a WebView2 on your form:

    private async void Form1_Load(object sender, EventArgs e)
    {
        await webView21.EnsureCoreWebView2Async();
    }
    
    private async void WebView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
    {
        webView21.CoreWebView2.GetDevToolsProtocolEventReceiver("Log.entryAdded").DevToolsProtocolEventReceived += ConsoleMessage;
        await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Log.enable", "{}");
        webView21.CoreWebView2.OpenDevToolsWindow();
        webView21.CoreWebView2.Navigate("https://stackoverflow.com");
    
    }
    
    private void ConsoleMessage(object sender, Microsoft.Web.WebView2.Core.CoreWebView2DevToolsProtocolEventReceivedEventArgs e)
    {
        if (e != null && e.ParameterObjectAsJson != null)
        {
            Console.WriteLine("WebView2:" + e.ParameterObjectAsJson);
        }
    }