webview_flutter 4系 の iOS アプリケーションを Safari を使用してデバッグする方法

環境

Flutter 3.22.1
webview_flutter 4.7.0
webview_flutter_wkwebview 3.13.1

はじめに

iOS で webview_flutter のデバッグを有効にし、Safari でデバッグする方法について説明します。

まず、 webview_flutter でデバッグ モードを有効にするには、 WebKitWebViewController.setInspectable に true を設定する必要があります。

webview_flutter_wkwebview 3.6.0からそうなっているようです。
https://pub.dev/packages/webview_flutter_wkwebview/changelog

コード例

import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

class _WebViewWidgetState extends State<WebViewPage> {
  final controller = () {
    final params = () {
      if (WebViewPlatform.instance is WebKitWebViewPlatform) {
        return WebKitWebViewControllerCreationParams();
      } else {
        return const PlatformWebViewControllerCreationParams();
      }
    }();

    final controller = WebViewController.fromPlatformCreationParams(
      params,
    );
    if (controller.platform is WebKitWebViewController) {
      (controller.platform as WebKitWebViewController).setInspectable(true);
    }
    return controller;
  }();
...
}

その他設定

iPhoneおよびMacの設定に関しては他記事参考に設定すればOKです。

参考
https://qiita.com/ya8612tec/items/20390b3e4fbec4d01682