読者です 読者をやめる 読者になる 読者になる

Makopy'5 La6

スマホアプリ開発とかその周辺のこととか関係ないこと。または恋は言ってみりゃボディー・ブロー

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

WebViewを巡るあれこれ

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

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

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

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

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

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

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

@ネイティブアプリ開発

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

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

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

iOS

Safariを利用します。

  • Safariの設定
    • 設定
      • 詳細
        • 「メニューバーに"開発"メニューを表示」にチェック f:id:makopy_inside:20170222223633p:plain
  • 開発メニューからInspectする対象を選択 f:id:makopy_inside:20170222223718p:plainf:id:makopy_inside:20170222223745p:plain

Android

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