Runtime_ConsoleAPICalled not triggered when console message passed through javascript proxy class

[NineBerry]

Using Runtime_ConsoleAPICalled event in an embedded WebView2 control to receive messages sent to the developer console via JavaScript console.log(), this works fine on normal web pages, but fails when the webpage uses the proxy pattern to replace window.console. Mostly online development tools like jsfiddle do that, but also some other webpages. However, the console messages are shown in the developer tools itself (opened via F12)

The same also applies to Console.messageAdded.

See below for full source code to reproduce.

Version SDK: 1.0.1938.49 Runtime: 116.0.1938.76 Framework: Winforms .net Framework, but can also reproduce in Delphi VCL TEdgeBrowser OS: Windows 11 22H2

Regression Was this working before but has regressed? no (As far as I am aware)

Repro Steps

Using the following test application in Visual Studio 2022 in an WinForms (.net Framework 4.8 project)

Form1.cs

using System;
using System.Windows.Forms;
using Microsoft.Web.WebView2.Core.DevToolsProtocolExtension;

namespace WindowsFormsApp2
{
    public partial class Form1 : Form
    {
        DevToolsProtocolHelper helper = null;

        public Form1()
        {
            InitializeComponent();
        }

        private async void webView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
        {
            helper = webView21.CoreWebView2.GetDevToolsProtocolHelper();
            await helper.Runtime.EnableAsync();
            helper.Runtime.ConsoleAPICalled += Runtime_ConsoleAPICalled;
        }

        private void buttonWorking_Click(object sender, EventArgs e)
        {
            webView21.Source = new Uri("D:\\Downloads\\Windows\\A.html");
        }

        private void buttonBroken_Click(object sender, EventArgs e)
        {
            webView21.Source = new Uri("https://jsfiddle.net/mnctx9a5/");
        }

        private void Runtime_ConsoleAPICalled(object sender, Runtime.ConsoleAPICalledEventArgs e)
        {
            MessageBox.Show(e.Args[0].Value.ToString());
        }
    }
}

Form1.Designer.cs

namespace WindowsFormsApp2
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
            this.buttonWorking = new System.Windows.Forms.Button();
            this.buttonBroken = new System.Windows.Forms.Button();
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).BeginInit();
            this.SuspendLayout();
            // 
            // webView21
            // 
            this.webView21.AllowExternalDrop = true;
            this.webView21.CreationProperties = null;
            this.webView21.DefaultBackgroundColor = System.Drawing.Color.White;
            this.webView21.Location = new System.Drawing.Point(12, 49);
            this.webView21.Name = "webView21";
            this.webView21.Size = new System.Drawing.Size(1164, 625);
            this.webView21.TabIndex = 0;
            this.webView21.ZoomFactor = 1D;
            this.webView21.CoreWebView2InitializationCompleted += new System.EventHandler<Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs>(this.webView21_CoreWebView2InitializationCompleted);
            // 
            // buttonWorking
            // 
            this.buttonWorking.Location = new System.Drawing.Point(22, 13);
            this.buttonWorking.Name = "buttonWorking";
            this.buttonWorking.Size = new System.Drawing.Size(75, 23);
            this.buttonWorking.TabIndex = 1;
            this.buttonWorking.Text = "Working";
            this.buttonWorking.UseVisualStyleBackColor = true;
            this.buttonWorking.Click += new System.EventHandler(this.buttonWorking_Click);
            // 
            // buttonBroken
            // 
            this.buttonBroken.Location = new System.Drawing.Point(115, 13);
            this.buttonBroken.Name = "buttonBroken";
            this.buttonBroken.Size = new System.Drawing.Size(72, 23);
            this.buttonBroken.TabIndex = 2;
            this.buttonBroken.Text = "Broken";
            this.buttonBroken.UseVisualStyleBackColor = true;
            this.buttonBroken.Click += new System.EventHandler(this.buttonBroken_Click);
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(1188, 686);
            this.Controls.Add(this.buttonBroken);
            this.Controls.Add(this.buttonWorking);
            this.Controls.Add(this.webView21);
            this.Name = "Form1";
            this.Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private Microsoft.Web.WebView2.WinForms.WebView2 webView21;
        private System.Windows.Forms.Button buttonWorking;
        private System.Windows.Forms.Button buttonBroken;
    }
}

Content of file D:\Downloads\Windows\A.html (Same as the source code in the fiddle https://jsfiddle.net/mnctx9a5/ )

<!DOCTYPE html>
<html>
<body>
  <script>
    function test() {
      console.log("Test Log Output");
    }
  </script>
  <button type="button" onclick="test()">Test</button>
</body>
</html>

1. Start the Winforms application.
2. Click on "Working" button -> Test page with "Test" button is shown
3. Focus WebView and press F12 -> DevTools are shown
4. Click on "Test" button -> Message Box "Test Log Output" is shown and log message is shown in DevTools
5. Click on "Broken" button -> JSFiddle is shown
6. In Fiddle, click on "Test" button -> NO Message Box is shown even though log message is shown in DevTools

[NineBerry]

Another website that is affected is codepen. You can use for example this pen for testing: https://codepen.io/NineBerry/pen/rNowbLO

[vbryh-msft]

@NineBerry could you please check if you see Runtime.consoleAPICalled in DevTools Protocol Monitor to isolate if it is wv2 API issue/ wv2 DevTools or those pages behave differently in CDP? Can try in wv2 DevTools and Edge one with triggered/ not triggered cases.

[NineBerry]

I can see the Runtime.consoleAPICalled event in the Protocol Monitor for both websites in both the Standalone Edge and the C# Winforms application with the WebView2 control embedded.

So that means: For the normal webpage that uses console.log directly, I can see the event triggered in Protocol Monitor and at the same time the Runtime_ConsoleAPICalled in my app is triggered and shows the message box. For the jsfiddle, I can see the event triggered in Protocol Monitor, but the Runtime_ConsoleAPICalled in my app is not triggered and no message box is shown.

Working:

Broken: (Notice no message box)

I had cleared the Protocol Monitor before clicking "Test" button both times.