How to show the inspector within your WKWebView ba

问题:

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.

回答1:

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

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

回答2:

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

Swift:

preferences.setValue(true, forKey: "developerExtrasEnabled")

Or in Objective-C:

[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.

回答3:

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.

回答4:

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