SafariのWebインスペクタが表示されない件について

こんにちは。開発部第１グループの涌井です。
今回は、SafariのWebインスペクタが表示されない件についてになります。

開発環境

• MacOSのバージョン : Ventura 13.6.1
• Xcodeのバージョン : 15.0.1
• シミュレータのiOSバージョン : 17.0.1

症状

Xcodeのシミュレータで久し振りにSafariでWebViewを確認しようとしました。が、Safariの開発タブからシミュレータの項目に、アプリ名やWebViewページ名が表示されていない。。。

原因

こちらによると、iOS16.4からWKWebViewの仕様が変わったとのこと。

対応

WKWebViewのインスペクタを制御するプロパティisInspectable (詳細はこちら)が追加されており、これをtrue にする。
ただし、こちらによると、使用しているXcodeのバージョンによっては、このプロパティがない模様。その場合、別の対応コードで解決できるようです。

対応コード例

以下がisInspectable がある/ない場合で、WKWebViewをExtensionしたもののコード例となります。Extensionにしておけば、WebViewControllerが複数ある場合にも、コードがスマートにまとまりますね。

• isInspectable がある場合

extension WKWebView {
    func enabledSafariInspector() {
        #if DEBUG
            if #available(iOS 16.4, *) {
                self.isInspectable = true
            }
        #endif
    }
}

• isInspectable がない場合

extension WKWebView {
    func enabledSafariInspector() {
        #if DEBUG
            if #available(iOS 16.4, *) {
                if self.responds(to: Selector(("setInspectable:"))) {
                    self.perform(Selector(("setInspectable:")), with: true)
                }
            }
        #endif
    }
}

• 処理の呼び出し側

webView.navigationDelegate = self
webView.uiDelegate = self
webView.enabledSafariInspector()

結果

対応前に表示されていなかった箇所で、アプリ名やWebViewページ名が表示されました。(塗りつぶしてしまいましたが。。。)

まとめ

インスペクタが表示されて、WebViewの確認ができるようになりました。
アプリによっては、WebView検証する機会が少なかったりするので、急にインスペクタが表示されなくなると焦りますよね。

参考記事

https://qiita.com/gigilog/items/41950bb1d4d301cd9c61
https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/
https://developer.apple.com/documentation/webkit/wkwebview/4111163-isinspectable
https://stackoverflow.com/questions/76216183/how-to-debug-wkwebview-in-ios-16-4-1-using-xcode-14-2/76603043#76603043