Edited at

端末のWebViewの詳細を調べる方法(Safariインスペクタ)

More than 3 years have passed since last update.

アプリやスマホwebページでwebViewに問題があるけど、詳細が見れなくて困った方へ。

Safariに便利な機能があります!

スクリーンショット 2016-05-27 10.29.50.png


1:端末のWebインスペクタをON

iOS端末の設定Safari詳細にてWebインスペクタをON

IMG_0234.jpg


2:Safari開発ツールをON

PCでSafariを立ち上げて環境設定詳細からメニューバーに開発メニューを表示をON

スクリーンショット 2016-05-26 14.23.15.png


3:立ち上げ


  • アプリの場合→見たいアプリをビルドします。
    (立ち上げた後は調べたいwebViewページを開いておきましょう。)

  • Webの場合→見たいページをSafariなどで開いておきます


4:Safari開発メニューから対象の端末とアプリを選択

するとドーーーン。

スクリーンショット 2016-05-27 10.29.50.png

cssを軽くいじったりとかもできます

スクリーンショット 2016-05-26 15.01.41.png

エラーがあった時はデバッガとかで観れるようです。

これは端末でsafariを立ち上げている時に関わらず、アプリ内webviewも見ることができます。

便利!