如何在基于 WKWebView 的桌面应用程序中显示检查器？

Question

我正在寻找一种方法来在我的 Mac 应用程序中显示 inspector 的 WKWebView。

使用 WebKit1 和 WebView，只需在 UserDefaults 中将 WebKitDeveloperExtras 设置为 true 即可轻松在 Mac 应用程序中显示检查器。这将为您在每个 Web 视图中提供一个“检查元素”菜单。

但是在带有 WKWebView 的 WebKit2 中，这不再起作用了。在 WWDC14 检查器会话中，他们解释说您必须添加授权，然后才能从 Safari 开发人员菜单中显示检查器。这只有在您是开发人员时才有效。

我查看了 private headers 并找到了 _allowsRemoteInspection 这让我觉得你可以以某种方式启动检查器并连接到它，但我不确定从那里去哪里。

虽然我希望有一个官方的方式来做到这一点，但我的应用程序不在 AppStore 中，所以我可以使用私有的东西。

Answer 1

对于 Swift，您可以直接设置它，而不是构建桥接头

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

Answer 2

根据 Koen 的发现，设置此属性的更简单方法是使用键值编码，不需要桥接头。

斯威夫特：

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

或者在 Objective-C 中：

[preferences setValue:@YES forKey:@"developerExtrasEnabled"];

键值编码将查找与键匹配的方法和实例变量，包括以下划线为前缀的私有方法和实例变量。

Answer 3

就这样把私有属性暴露出来就可以用了

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

现在您可以通过右键单击获得“检查元素”菜单。

我唯一还需要弄清楚的是如何直接从代码中显示检查器。

Answer 4

基于 Koen Bok 的回答，对于 Swift，赋予 this gist。使用这些文件，您需要将以下行添加到桥接标头中：

#import "WKPreferences+DevExtras.h"

用法看起来像

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

Answer 5

可检查

从macOS Ventura（

13.3

）开始，在WKWebView上有一个新的属性

isInspectable

；打开它会启用检查器。不再需要依赖私有 API 或

KVO

。

wkWebView.isInspectable = true

有一个警告，要显示检查器，您需要右键单击网站，上下文菜单应该有选项

Inspect Element

。有时情况并非如此，您需要从 Safari 打开 Web Inspector（需要在 Safari 上启用开发者工具）。

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