How to use WebView2 to remote debug (localhost) running Edge (Chrome) browsers
john zyd
421
Reputation points
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:
- 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.
- 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.
- To save trouble and time, I didn’t use HTTPS. All other settings were set up using the default settings.
- 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?