(iOS/Android)WebViewのInspect(Mac OS)

WebViewを巡るあれこれ

ハイブリッドアプリは、それ自体がWebViewの世界の話なので言わずもがなですが…。
ネイティブアプリ開発においても、実戦では結構WebViewを使う頻度は多いです。
何かしらのログイン画面を表示したり、URLロードをフックして云々とか、JavaScriptと連携したりとか。
Webのページ遷移の中にネイティブの画面遷移を絡めて…というのも実際にありました。

WebViewを使ったテクニカルトピックは別の機会に書くとして。
今回はとりあえずWebインスペクタの設定方法を覚書しておきます。

WebViewが絡む開発ではWebインスペクタの存在は重要です。

@ハイブリッドアプリ開発

Webインスペクタは手放せない！！

今回記事では設定方法等扱いませんが、OSやブラウザに依存しないweinreというツールもあります。
weinre - Home

ハイブリッドアプリではインスペクタの使用頻度が必然的に高くなるため、weinreを使う方が楽かもしれません。
(設定はちょっとばかり面倒です)

@ネイティブアプリ開発

WebViewを使った開発時にWebインスペクタがあると便利！

• アプリ内部のHTML/JavaScriptのデバッグ
• JavaScript連携のデバッグ
• 無茶振りの実現方法を探る(何かフックできないか、とか)
  など

Webインスペクタの設定/起動方法

今回はiOSとAndroidでそれぞれの方法を示します。

iOS

Safariを利用します。

• Safariの設定
  • 設定
    • 詳細
      • 「メニューバーに"開発"メニューを表示」にチェック
• 開発メニューからInspectする対象を選択

Android

前提条件として、Chromeが必要です。

• 下記より、「ADB Plugin」をインストール https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage
• Chromeのアドレスバー右のドロイド君アイコンをクリック
• Devicesの中からInspectする対象を選択