浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【iOS】ネイティブアプリのWebViewをデバッグする方法

タイトル通り、ネイティブアプリの Webview をデバッグする方法についてです。
普段だったら、WebView で開いているページをブラウザで開いてデバッグを行えばいいのですが、今回、iPhone と iPad で挙動が異なったため、端末によって発生するエラーがあるのでは?と思い、端末ごとにデバッグを行いました。

今回参考にさせていただいた記事はこちらから。

ネイティブアプリWEBViewでRemote Debug まとめ – Qiita
https://qiita.com/ryurock/items/4a6198e8bc64e268ac2e

 

まず、端末の設定です。
設定から Safari の項目を開きます。
このページの一番下に「詳細」という項目があるので、こちらを開きます。
その中に「Webインスペクタ」という項目があるので、こちらを有効にすればOKです。
スクリーンショットはこちら。
赤枠で囲ってある部分です。

端末の設定は以上です。

次に Mac の設定です。
Safari を開き、メニューバー「Safari」の「環境設定」を開きます。
で、設定の「詳細」タブから「メニューバーに“開発”メニューを表示」にチェックを入れます。
Mac の設定は以上です。

上記が完了したら、Mac と 端末を接続し、ネイティブアプリのデバッグしたい WebView を表示します。
そうすると、Mac Safari のメニューバーの「開発」という項目に、接続した端末と Web ページの URL が表示されるので、こちらをクリックすれば Web Inspect が表示されます。
あとは、こちらを使ってデバッグを行ってください。

てっきり、ネイティブアプリでは Safari のデバッグ機能が使えないと思い込んでいたので、そうでないとわかって少し嬉しかったです。
使わずに済む方がありがたくはありますが、いざというときのために覚えておきたいと思います。

 

以上、ネイティブアプリの WebView をデバッグする方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)