How to show the inspector within your WKWebView based desktop app?

Question

I'm looking for a way to show the inspector for a WKWebView inside my Mac app.

With WebKit1 and WebView it was easy to show the inspector inside your Mac app, by just setting WebKitDeveloperExtras to true in your UserDefaults. That would give you an "Inspect Element" menu in every web view.

But in WebKit2 with WKWebView this is not working anymore. In the WWDC14 inspector session they explain that you have to add an entitlement and can then show the inspector from the Safari developer menu. This only works if you are the developer.

I looked through the private headers and found _allowsRemoteInspection which makes me think you can somehow launch an inspector and connect to it, but I'm not sure where to go from there.

Although I'm hoping for an official way to do this, my app is not in the AppStore, so I'm ok with using private stuff.

Answer 1

This was patched here: https://lists.webkit.org/pipermail/webkit-dev/2014-August/026790.html

Just expose the private property like this and you can use it.

@interface WKPreferences (WKPrivate)
@property (nonatomic, setter=_setDeveloperExtrasEnabled:) BOOL _developerExtrasEnabled;
@end

Now you get the "Inspect Element" menu on right click.

The only thing I still need to find out is how to show the inspector directly from code.

Answer 2

Building on Koen Bok's answer, for Swift, confer this gist. Using those files, you'll need to add the following line to your bridging header:

#import "WKPreferences+DevExtras.h"

Usage looks like

let webView = WKWebView(frame: window.frame)
webView.configuration.preferences.enableDevExtras();

Answer 3

For Swift, instead of building a bridging header you can set it directly

self.webView.configuration.preferences.setValue(true, forKey: "developerExtrasEnabled")

Answer 4

Based on what Koen found, an easier way to set this property is to use Key Value Coding, no bridging headers required.

Swift:

let preferences = webView.configuration.preferences
preferences.setValue(true, forKey: "developerExtrasEnabled")

Or in Objective-C:

[webView.configuration.preferences setValue:@YES forKey:@"developerExtrasEnabled"];

Key Value Coding will look for methods and instance variables that match the key, including private ones prefixed by an underscore.

Answer 5

isInspectable

Starting on macOS Ventura (13.3), there is a new property isInspectable on WKWebView; turning it on will enable the inspector. No need to rely on private APIs or KVO anymore.

wkWebView.isInspectable = true

Warning

There is a caveat tho, to show the inspector, you need to right-click on a website, and the context menu should have the option Inspect Element. Sometimes this is not the case, and you need to open the Web Inspector from Safari (developer tools need to be enabled on Safari).

Safari > Develop > [Name of your device] > [Name of your app] > [URL or title of website open with WKWebView]