How to use WebView2 to remote debug (localhost) running Edge (Chrome) browsers

john zyd 421 Reputation points
2021-02-02T15:12:33.847+00:00

Hello: As I installed multiple Edge(Chrome) Add-ons, and some web sites are using Captchas to make web automation harder. I try to see if I can use WebView2 to connect with a running Edge browser, and run some JavaScript from it.

I have done the following with success:

  1. Follow the instructions by “Get Started with Remote Debugging Windows 10 Devices”. I set up Edge browser as “the host (debuggee machine)”: In Edge browser, change “Enable remote debugging through Windows Device Portal” from “Default” to “Enable”, then restart Edge browser.
  2. I set up the client (debugger machine) with Edge Canary. In Edge Canary, change “Enable remote Windows device debugging in edge://inspect” from “Default” to “Enable”, then restart Edge Canary.
  3. To save trouble and time, I didn’t use HTTPS. All other settings were set up using the default settings.
  4. From client machine (Edge Canary), visit: edge://inspect/#devices In the connect input box, click on this one: http://localhost:50080 After a few seconds, I can see the running Edge and its open Tabs. In short, I can now using 2 Edge (Chrome) instances in my Windows 10 PC to start remote debug procedure, it works well. However, as I need to run some JavaScript automatically, I would like to make a program to launch WebView2 to do the same things as I can do from the Edge Canary. I have created the following C# project (WinForm .NET 5) to launch WebView2.
using Microsoft.Web.WebView2.WinForms;
using System;
using System.Drawing;
using System.Windows.Forms;

    namespace DebugLocalHostForm
    {
        public partial class Form1 : Form
        {
            private readonly WebView2 BingWebView = new WebView2();

            public Form1()
            {
                InitializeComponent();
                Control.CheckForIllegalCrossThreadCalls = false;
                BingWebView.CreationProperties = null;
                BingWebView.Location = new Point(10, 10);
                BingWebView.Name = "BingWebView";
                BingWebView.Size = new Size(1550, 880);
                BingWebView.Source = new Uri("http://localhost:50080", UriKind.Absolute);
                BingWebView.TabIndex = 0;
                BingWebView.ZoomFactor = 1D;
                BingWebView.Visible = true;
                this.SuspendLayout();
                ClientSize = new Size(1500, 850);
                Controls.Add(BingWebView);

                Name = "Form1";
                Text = "Form1";
                ResumeLayout(false);
            }

            private void Form1_Load(object sender, EventArgs e)
            {

            }
        }
    }

I can run my program, but the WebView2 browser shows something different, you can see this from the picture. I guess may be I can change my code to view the Edge DevTools as I did with the Edge Canary, so I can run some JavaScript. Any suggestions? 63171-edgecanaryremotedebuglocalhost.png

63074-webview2localhostremotedebug.png

Microsoft Edge
Microsoft Edge
A Microsoft cross-platform web browser that provides privacy, learning, and accessibility tools.
2,127 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,233 questions
Visual Studio Debugging
Visual Studio Debugging
Visual Studio: A family of Microsoft suites of integrated development tools for building applications for Windows, the web and mobile devices.Debugging: The act or process of detecting, locating, and correcting logical or syntactical errors in a program or malfunctions in hardware. In hardware contexts, the term troubleshoot is the term more frequently used, especially if the problem is major.
938 questions
{count} votes