CODEWITHSUNDEEP
objective-cmacoswebkitwkwebviewwebkit2
Koen Bok
Koen Bok

Reputation: 3284

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

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.

Upvotes: 35

Views: 22888

Answers (5)

Patrick Smith
Patrick Smith

Reputation: 537

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.

Upvotes: 20

Vicente Garcia
Vicente Garcia

Reputation: 6370

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]

Upvotes: 7

Drazen
Drazen

Reputation: 2826

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

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

Upvotes: 33

Clay Bridges
Clay Bridges

Reputation: 11880

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();

Upvotes: 1

Koen Bok
Koen Bok

Reputation: 3284

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.

Upvotes: 6

Related Questions