Rails: Hotwire Nativeをデバッグする（3）WebViewのデバッグ（翻訳）
Hotwire Nativeアプリケーションのデバッグ方法を学ぶ旅の次の段階として、今回は具体的なテクニックに触れていきます。前回記事ではおおまかな概要にとどめましたが、今回はWebViewのデバッグを深く掘り下げていきます。Hotwire Nativeは、WebViewをネイティブアプリでラップする形で動いていることをしっかり押さえておきましょう。
🔗 iOSのWebViewをデバッグする
最初にiOSから見ていきましょう。iOSはAndroidよりも手順が多いのと、iOSアプリを先に作る可能性が高いためです。
iOSアプリにWebインスペクタをアタッチするには、先にiOSアプリをXcodeのシミュレータで起動しておいてから、アプリをSafariで開く必要があります。
- Safariブラウザに「開発」メニューが表示されていない場合は、次の方法で開発者モードを有効にする必要があります。
コマンド+, キーを押してSafariの設定を表示し、「詳細」タブの「Webデベロッパ用の機能を表示」チェックボックスをオンにします。
- これでSafariの「開発」メニューにシミュレータのアプリが表示されるので、そこからWebインスペクタを開けるようになるはずです。
訳注
Safariの「開発メニューで」以下のように表示されます。
Hotwire Nativeのバージョンが古い場合は、WebViewインスペクタを使える状態にしておく必要が生じる場合があります。これは、AppDelegateクラスの下にあるHotwireのconfigオブジェクトで以下のように設定できます。
Hotwire.config.makeCustomWebView = { config in
let webView = WKWebView(frame: .zero, configuration: config)
webView.allowsLinkPreview = false
webView.isInspectable = true
return webView
}
訳注
AppDelegate.swiftは以下の場所にあります。
🔗 AndroidのWebViewをデバッグする
AndroidのWebインスペクタを開くのはずっと簡単です。Hotwire NativeのAndroidアプリが実行中であれば、Chromiumベースのブラウザ（ChromeやEdgeなど）でchrome://inspect/ を開くだけで完了です。
🔗 WebViewデバッガのメリット
WebViewデバッガでアプリにアクセス可能にしたおかげで、「ネイティブでないと適用されないCSSスタイルをテストする」「ブリッジコンポーネントをデバッグする」「コード自体をデバッグする」といったクリエイティブな用途が広がります。さらに、多くのWeb開発者がご存知のブレークポイント設定など、優秀な機能がすべて使えるようになります。
このようにして、ネイティブアプリの世界から私たちの住むWeb世界に主導権を移動することに成功しました。私はこうやって自分の土俵に引き寄せてから戦うのが大好きです。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。
従来Turbo NativeとStradaと呼ばれていたものは、現在はHotwire Nativeに統合されました。
参考: Hotwire Native: Hotwire Native is a web-first framework for building native mobile apps.