webview_flutterのWebViewをデバッグする

はじめに

WebViewを組み込んだアプリを開発していると、WebViewのCookieや通信内容を見ながらデバッグをしたくなることがあります。
今回は、webview_flutterを使用しているwebviewのデバッグ方法を共有します。
※あまりフロントを触ってこなかったので、一部用語等が異なる可能性があります。ご了承ください。

対象

Flutterのアプリ内WebViewをwebview_flutterで実装している人

用語

デベロッパーツール(Chrome)、Webインスペクタ(Safari)、などと呼ばれているアレを使用します。
どうやらChromeとSafariで呼び方が異なるようです。

環境

• Mac
• Android Studio

Flutter 3.3.9
Dart 2.18.5
webview_flutter: 3.0.4

Flutter

Dartのコードは以下一行を書くだけで準備完了です。
※実際の実装では開発環境のみで有効にするフラグを使用した方が安全です。

WebView(
    initialUrl: 'https://flutter.dev',
    debuggingEnabled: true, //これを有効にする
),

iOS

手順

1. MacのSafariの開発者モードを有効にしておきます
   環境設定(⌘+,)>詳細>「メニューバーに"開発"メニューを表示」にチェック

2. 対象のアプリをRunすると、アプリ内WebViewのWebPageがメニューの選択肢に出てきます
   

3. 対象のurlを選択することで、見慣れたWebインスペクタが出てきます
   

Android

手順

1. MacのChromeで chrome://inspect/#devices を開きます
2. 対象のアプリをRunすると、ページ内にデバッグデバイスが以下のような形で出てきます
   
3. inspectを開くことで、見慣れたデベロッパーツールが出てきます
   

おわりに

たまに出てくる根深い問題は、WebViewを直接ツールで見て解決しましょう。
参考になれば幸いです。