Zenn
😀

ネイティブアプリWEBViewでRemote Debug まとめ

2022/11/28に公開
Android
Chrome
HTML
iOS
Safari
tech

ネイティブアプリでよくあるシーン

「なんかWEBViewでバグってんだけども」

って言われたら真っ直ぐアプリエンジニアさんに投げつけるサーバーエンジニアのあなた。

私です!!

こんなことを毎回していたら、「あの人仕事してくんない」って嫌な目線が飛んで来るかもしれません。

そこでアプリの開発環境をビルドしてエミュレーターで確認するまでしない程度の動作検証方法を

  • iOS
  • Android

両方で紹介します

環境

  • MacOSX(10.12.6)
  • Chrome (64.0.3282.167)
  • Safari (11.0.1)

対象者

  • サーバーエンジニアでアプリのビルドとかしないんだけどもWEBViewの開発をしている人

事前準備で必要なもの

  • iPhone
    • Remote Debugをしたい対象アプリ(XCodeでビルドしたものに限ります。AppleストアからDLしたアプリは開けません)
  • Android
    • 対象のアプリでWebInspect DebugをONにしたアプリでないと開けません。

参考情報

iOS

Safari + iPhone が必要です。

対象のアプリをビルドする

iOSネイティブアプリはビルドしたアプリでないとネイティブアプリのremote debugができません。
なのでdebugしたいネイティブアプリをビルドしてdebugしたい端末にいれてください。

iPhone 「設定」=> 「Safari」 => 「詳細」=> 「Webインスペクタ」をON

こんな感じ

iPhone 「設定」=> 「Safari」

でこんな感じ

「詳細」=> 「Webインスペクタ」をON

iPhoneをケーブルでMacにつなぐ

安モンのケーブルだと反応しない場合があるので注意です。

Safari => 「設定」=> 「開発メニューを表示」にチェック

これ

Safari 開発メニューを表示

Remote Debugしたいアプリを起動

アプリを起動後、Safariのメニューから => 「開発」=> 「xxのiPhone」という項目があります。
そこに対象のアプリ名で今表示しているWebViewのURLが表示されていますのでRemote DebugしたいURLをクリックするとWebInspectが表示されます。

iOSネイティブアプリWebInspect表示

Android

Chrome + スマホ が必要です。

対象のアプリがsetWebContentsDebuggingEnabledかどうか確認する

ネイティブAndroidアプリ WebView のリモート デバッグ(Google 公式)に記載されていますが、対象アプリのWEBViewの設定でDebug許可が入っていないとできません。

まずはDebugしたい対象アプリがWEbViewのDebugの設定が入っているか確認してください。

Debugしたい端末を開発者モードにする

Android端末の開発者モードをONにする方法
に記載されている通り ビルド番号 を壊れそうなほど連続でタップしてください。

これでデベロッパーになりました！ って出てきたらOKです。

スマホをMacにUSBで接続します

あんまり安モンなusbだと充電しかしてくれないので注意です。

Chromeを開いて chrome://inspect/#devices と入力します

下記のように表示されていたらOKです。

Android 端末認識確認

WebInspectを開いてみる

こんな感じに表示されてInspectを押すとWebネイティブアプリのWebInspectが開きます。

Android WebInspect表示方法

最後に

ビルドするほどでもない場合にとかに有効ですしこれでアプリエンジニアさんとも仲良くなれますね!!

Discussion