DevTools protocol event Overlay.nodeHighlightRequested not received

[poostwoud]

Hi,

I'm implementing WebView2 1.0.2106-prerelease in a WinForms .NET 6 application.

I'm trying to subscribe to the Overlay.nodeHighlightRequested event, but I'm not receiving anything. I am getting the Page.loadEventFired. In both cases the correct domain is enabled.

Below the code used for initializing the WebView2:

        private async void button2_Click(object sender, EventArgs e)
        {
            await webView21.EnsureCoreWebView2Async();

            webView21.CoreWebView2.ProcessFailed += CoreWebView2OnProcessFailed;
            
            webView21.CoreWebView2.GetDevToolsProtocolEventReceiver("Page.loadEventFired").DevToolsProtocolEventReceived += PageLoadEventFiredReceiverOnDevToolsProtocolEventReceived;
            webView21.CoreWebView2.GetDevToolsProtocolEventReceiver("Overlay.nodeHighlightRequested").DevToolsProtocolEventReceived += OverlayNodeHighlightRequestedReceiverOnDevToolsProtocolEventReceived;
            webView21.CoreWebView2.GetDevToolsProtocolEventReceiver("Browser.downloadProgress").DevToolsProtocolEventReceived += OnDevToolsProtocolEventReceived;

            await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Page.enable", "{}");
            await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("DOM.enable", "{}");
            await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Overlay.enable", "{}");
            await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Overlay.setInspectMode", "{\"mode\":\"searchForNode\",\"highlightConfig\":{\"showInfo\":true,\"contentColor\":{\"r\": 155, \"g\": 11, \"b\": 239, \"a\": 0.7}}}");
        }

Any thoughts on what I'm doing wrong?

Cheers,

Peter

[poostwoud]

I came across the Microsoft.Web.WebView2.DevToolsProtocolExtension. Now my code looks like this:

        private async void button2_Click(object sender, EventArgs e)
        {
            await webView21.EnsureCoreWebView2Async();
            
            webView21.CoreWebView2.ProcessFailed += CoreWebView2OnProcessFailed;
            
            var helper = webView21.CoreWebView2.GetDevToolsProtocolHelper();

            webView21.Source = new Uri("https://google.nl");
            
            await helper.Page.EnableAsync();
            helper.Page.LoadEventFired += PageOnLoadEventFired;
            
            await helper.Overlay.EnableAsync(); // <===== Exception thrown here;
            helper.Overlay.NodeHighlightRequested += OverlayOnNodeHighlightRequested;
        }

Enabling the overlay domain causes the following exception to be thrown:

System.Reflection.TargetInvocationException
  HResult=0x80131604
  Message=Exception has been thrown by the target of an invocation.
  Source=System.Private.CoreLib
  StackTrace:
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Span`1& arguments, Signature sig, Boolean constructor, Boolean wrapExceptions)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) in System.Reflection\RuntimeMethodInfo.cs:line 465
   at System.Delegate.DynamicInvokeImpl(Object[] args) in System\Delegate.cs:line 67
   at System.Delegate.DynamicInvoke(Object[] args) in System\Delegate.cs:line 464
   at System.Windows.Forms.Control.InvokeMarshaledCallbackDo(ThreadMethodEntry tme)
   at System.Windows.Forms.Control.InvokeMarshaledCallbackHelper(Object obj)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state) in System.Threading\ExecutionContext.cs:line 137
--- End of stack trace from previous location ---
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state) in System.Threading\ExecutionContext.cs:line 152
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state) in System.Threading\ExecutionContext.cs:line 114
   at System.Windows.Forms.Control.InvokeMarshaledCallback(ThreadMethodEntry tme)
   at System.Windows.Forms.Control.InvokeMarshaledCallbacks()
   at System.Windows.Forms.Control.WndProc(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, WM msg, IntPtr wparam, IntPtr lparam)
   at Interop.User32.DispatchMessageW(MSG& msg)
   at System.Windows.Forms.Application.ComponentManager.Interop.Mso.IMsoComponentManager.FPushMessageLoop(UIntPtr dwComponentID, msoloop uReason, Void* pvLoopData)
   at System.Windows.Forms.Application.ThreadContext.RunMessageLoopInner(msoloop reason, ApplicationContext context)
   at System.Windows.Forms.Application.ThreadContext.RunMessageLoop(msoloop reason, ApplicationContext context)
   at System.Windows.Forms.Application.Run(Form mainForm)
   at DevToolsTest.Program.Main() in D:\data\Prototypes\DevToolsTest\Program.cs:line 14

  This exception was originally thrown at this call stack:
    Microsoft.Web.WebView2.Core.CoreWebView2.CallDevToolsProtocolMethodAsync(string, string)
    Microsoft.Web.WebView2.Core.DevToolsProtocolExtension.Overlay.EnableAsync()
    DevToolsTest.Form1.button2_Click(object, System.EventArgs) in Form1.cs
    System.Threading.Tasks.Task.ThrowAsync.AnonymousMethod__128_0(object) in Task.cs

Inner Exception 1:
ArgumentException: Value does not fall within the expected range.

Is it because the Overlay domain is still experimental?

[poostwoud]

Okay, so it seems the Overlay domain requires the DOM domain to be enabled. However unfortunately no Overlay events are received yet.

        private async void button2_Click(object sender, EventArgs e)
        {
            await webView21.EnsureCoreWebView2Async();
            
            webView21.CoreWebView2.ProcessFailed += CoreWebView2OnProcessFailed;
            
            var helper = webView21.CoreWebView2.GetDevToolsProtocolHelper();

            webView21.Source = new Uri("https://google.nl");
            
            await helper.Page.EnableAsync();
            helper.Page.LoadEventFired += PageOnLoadEventFired;

            await helper.DOM.EnableAsync();
            await helper.Overlay.EnableAsync();
            helper.Overlay.NodeHighlightRequested += OverlayOnNodeHighlightRequested;
        }

[ryanlifferth]

I had the same problem and was down the same path you are. I looked at the nuget package you referenced, Microsoft.Web.WebView2.DevToolsProtocolExtension. However the latest version of WebView2 (dotnet 6.0) has that functionality now built in.

The code that is working for me now is:

private async void button2_Click(object sender, EventArgs e)
{
    var json = "{\"mode\":\"searchForNode\",\"highlightConfig\":{\"showInfo\":true,\"contentColor\":{\"r\": 155, \"g\": 11, \"b\": 239, \"a\": 0.7}}}";

    await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("DOM.enable", "{}");
    await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Overlay.enable", "{}");
    await webView21.CoreWebView2.CallDevToolsProtocolMethodAsync("Overlay.setInspectMode", json);
}