Accessing Developer Tools Panel in WebView

If you are using Eto WebView controls in Rhino, this is an example of how to enable the developer tools panel. Note that Eto WebView control is tied to Microsoft WebView2 on Windows and WebKit on macOS so the details of enabling and accessing the developer tools panel is slightly different.

Open ScriptEditor in Rhino and run this C# code

// #! csharp
using System;
using Rhino.UI;
using Eto.Forms;
using Eto.Drawing;

class MyWebView : Form
{
    public MyWebView()
    {
        Owner = RhinoEtoApp.MainWindow;
        Size = new Size(500, 400);

        var wv = new WebView();
        wv.Url = new Uri("https://duckduckgo.com/");

        var b = new Button { Text = "Enable Developer Panel" };
        b.Height = 40;
        b.Click += (s, e) =>
        {
            dynamic c = wv.ControlObject;
#if MACOS
            // open developer panel from Safari
            // Develop -> <computer> -> menu
            c.Inspectable = true;
#elif WINDOWS
            c.CoreWebView2.OpenDevToolsWindow();
#endif
        };

        Content = new TableLayout
        {
            Rows = { new TableRow { Cells = { wv }, ScaleHeight = true }, b }
        };
    }
}

var f = new MyWebView();
f.Show();

This will open a window with a WebView control browsing DuckDuckGo website.

  • On Windows: Clicking the Enable Developer Panel opens the developer panel. Easy
  • On macOS: Clicking the Enable Developer Panel enables inspection of this window from Safari. Open Safari and access the inspector for this window from Develop menu. The inspector is listed under your machine name and will highlight the WebView control when hovering over.

6 Likes

Awesome tip and thanks for the code example @eirannejad !

2 Likes