【Swift】インスペクタを利用してWKWebViewの表示内容を確認

はじめに

こんにちはsuzukiです。今回はWKWebViewの表示内容をSafariで確認する方法をまとめます。
Webの表示内容をアプリから確認する時や、テストを行う際などに利用することもあるかなと思います。

インスペクタを利用するには下記の２点が必要です。
・開発用のビルドであること
・WebViewの設定でインスペクタの利用を許可すること

配布用のプロビジョニングではインスペクタ機能を利用することができません。
開発用のプロビジョニングでビルドされている必要があります。
開発用のプロビジョニングでIPAを作る場合は、テストフライトが使えないため注意です。

下記のコードでインスペクタを有効にします。
webViewのインスタンスに対する設定のため、もし複数のWebViewを利用している場合はインスペクタで確認したいWKWebViewに対してそれぞれ行う必要があります。
※iOS16.4より前のバージョンでは不要です。

 //isInspectableを有効化 webView.isInspectable = true

1 2	//isInspectableを有効化 webView.isInspectable = true

Safariの設定で開発メニューが表示されていない場合下記の手順で開発を表示してください。
メニュー→設定→詳細たぶ→Webデベロッパ用の機能を表示
※OSにより詳細異なる場合があります。

表示された開発メニューを選択すると下記のように接続されている端末が表示されます。

実際に対象の端末を選択するとインスペクタが開かれ、WKWebViewの表示している内容が確認できます。

インスペクタを利用してWKWebViewの表示内容を確認する方法についてまとめました。インスペクタとCharlesでWKWebViewの内で起きていることの解析に少しでも役に立てれたらと思います。