Enabling Developer Extras in HTMLViewer

Our Xojo application uses several HTMLViewer panels that we use to display complex web content that is generated by the application itself. This creates a need to be able to invoke “Web Inspector” from within the app to facilitate debugging the web content. In older versions of Xojo and WebKit, this was easy to do by enabling WebKitDeveloperExtras (on Mac) using a Terminal command. Something like “defaults write WebKitDeveloperExtras -bool true”.

In the latest 2020 versions of WebKit and Xojo, it appears this method of enabling the web inspector for HTMLViewer no longer works. It appears that the new way for this to work is for the application itself to include special application entitlements and/or by setting a property in the underlying WKWebView.

I am aware that MonkeyBread Software has a WKWebViewMBS class that does expose a ‘developerExtrasEnabled’ property, which would appear to do what I need, but I have not tried it because our application is targeted for both Mac and Windows. If I switch our views from HTMLViewer to WKWebViewMBS, then I wouldn’t be able to cross-compile for Windows since the MBS view is advertised as only working on Mac. It would be next to impossible for me to have to switch the app back a forth between using HTMLViewer and WKWebViewMBS each time we need to debug and then make a release.

Any thoughts, help or insight anyone?

You use #if targetMacOS in the code to only enable something for macOS.

And with HTMLViewer you always deal with various implementation

  • macOS with WebKit 1
  • macOS with WebKit 2
  • Windows with IE 11 or Chromium
  • Linux with GTK WebKit

I am aware that one can use #if TargetMacOS and others to conditionally compile code based on the platform. However, I am unsure how one would include a WKWebViewMBS in a window only on Mac builds, and include a HTMLViewer only on Windows builds. Seems like you’d have to add both to a window and at runtime make one visible and one invisible based on platform. Or am I missing something?

After doing a lot of research, I found the answer to enabling the Web Inspector on an HTMLViewer object on Mac. For whatever reason, Apple (or WebKit) decided to change the key used to enable the inspector. It used to be WebKitDeveloperExtras. Today it’s WebKitDebugDeveloperExtrasEnabled. Ugh!

To enable the Web Inspector in your app, you would need to run the following in Terminal:

defaults write <your-bundle-identifier> WebKitDebugDeveloperExtrasEnabled -bool YES

This command adds the key/value to your application’s ~/Library/Preferences/*.plist file. Any subsequent launches of the app (on that computer) will have the “Inspect Element” contextual menu option available for your embedded web views.

2 Likes

For macOS you would do both. The HTMLViewer Control and use WKWebViewMBS and related classes to access more features on that HTMLViewer.