はじめに
皆さん初めまして。
株式会社トラストバンクの地域通貨プラットフォーム chiica(チーカ)でリードエンジニアをしています清野です。
トラストバンク Advent Calendar 2024 2日目です。
今日は、Android, iOS のブラウザで開いている Web ページのデバッグ方法についてお話しようと思います。
普段 Web ページの開発している際、PC ブラウザのデベロッパーツール(Safari だと Web インスペクタ)はよく使うと思います。
通常、Android, iOS のブラウザでは使えない機能なんですが、PC と連携することでスマホでもデベロッパーツールが使えるようになるよってお話です。
前提
スマホブラウザでデベロッパーツールを使うための前提条件をまとめました。
| OS | スマホブラウザ | PCブラウザ | 条件 |
|---|---|---|---|
| Android | Chrome | Chrome | ・開発者向けオプションが有効になっていること ・USB デバッグまたはワイヤレスデバッグが有効になっていること ・ワイヤレスデバッグを使う場合は、adb が PC にインストールされていること |
| iOS | Safari | Safari | ・PC が macOS であること ・PC 側の Safari で開発メニューが有効になっていること ・USB ケーブルで PC と iPhone が接続されていること ・iOS 側の Safari の設定で Web インスペクタが有効になっていること |
| iOS | Chrome | Safari | ・PC が macOS であること ・PC 側の Safari で開発メニューが有効になっていること ・USB ケーブルで PC と iPhone が接続されていること ・iOS 側の Chrome の設定でウェブインスペクタが有効になっていること |
セットアップ手順
それでは早速、セットアップ手順に入りたいと思います。
お手元の環境に合わせてセットアップの手順をご確認ください。
Android のセットアップ手順
iOS のセットアップ手順
Android のセットアップ手順
※Android 13 で検証した手順となります。お手元の端末の OS バージョンによっては手順に若干の差異が生まれる可能性がございます。あらかじめご了承ください <(_ _)>
開発者向けオプションを有効化する
Android 端末側で開発者向けオプションを有効化します。
- 設定アプリを開く
- デバイス情報の項目をタップ
- ビルド番号の項目を連打
- 「開発者向けオプションが有効になりました」のトーストが表示されたら完了
USB デバッグまたはワイヤレスデバッグを有効化する
両方有効化しても問題ありませんが、どちらかが有効化されていればデベロッパーツールは使えるようになりますので、ご自身の環境に合わせて選択してください。
USB デバッグを有効化する
USB ケーブルで Android 端末と PC を接続する場合のセットアップ手順です。
- 設定アプリを開く
- システムの項目をタップ
- 開発者向けオプションの項目をタップ
- USB デバッグのトグルボタンをタップして有効化する
- Android 端末と PC を USB ケーブルで接続する
- Android 端末側で PC に USB デバッグを許可するかの確認ダイアログが表示されるので許可をタップ
- 完了
※Android OS のバージョンによっては、さらに USB の設定を変更する必要があります。開発者向けオプションの画面で「USB 設定」という項目がありますので、こちらをタップして「ファイル」や「ファイル転送」を選択してください。
ワイヤレスデバッグを有効化する
スマホと PC が同じ WiFi(LAN) に接続している場合のセットアップ手順です。
この手順では、adb(Android Debug Bridge) という CLI ツールを使います。
こちらの公式ページより adb の実行ファイルを含む SDK Platform Tools の zip ファイルをダウンロードして解凍したディレクトリの PATH を通してください。
- 設定アプリを開く
- システムの項目をタップ
- 開発者向けオプションの項目をタップ
- ワイヤレスデバッグのトグルボタンをタップして有効化する
- Android 端末側で接続中の WiFi ネットワークでワイヤレスデバッグを許可するかの確認ダイアログが表示されるので許可をタップ
- ワイヤレスデバッグの項目をタップ
- ペア設定コードによるデバイスのペア設定の項目をタップ
- 表示されたダイアログの内容を確認
- PC でターミナルを起動して次のコマンドを実行
adb pair <上記で確認した IP アドレス>:<上記で確認した port 番号> <上記で確認したペア設定コード> - Successfully paired to ~~~ の出力を確認
- 完了
Android のセットアップ完了
ここまで来れば Android のセットアップは完了です。お疲れ様でした。
Android のみの方はデベロッパーツールの利用方法に進んでください。
iOS もやりたいよって方は、このまま進んでください。
iOS のセットアップ手順
共通セットアップ手順
PC(macOS) の Safari で開発メニューを有効化する
Web エンジニアならすでに有効になってると思いますが、有効になってない人は以下の手順で設定してください。
- Safari を立ち上げる
- 設定を開く
- 詳細タブを開く
- Webデベロッパ用の機能を表示にチェックをつける
- ステータスバーを確認して開発メニューが表示されていることを確認
- 完了
PC(macOS) と iPhone を USB ケーブルで接続する
iOS の場合、WiFi 経由でのデバッグはできないはずなので、USB ケーブルで接続してください。
iOS(Safari) のセットアップ手順
- 設定アプリを開く
- Safari の項目をタップ
- 詳細の項目をタップ
- Web インスペクタのトグルボタンをタップ
- 完了
iOS(Chrome) のセットアップ手順
- Chrome アプリを開く
- 右下の 3 点リーダをタップ
- アイコン一覧の一番右にある設定をタップ
- コンテンツの設定をタップ
- ウェブインスペクタの項目をタップ
- ウェブインスペクタのトグルボタンをタップ
- Chrome アプリをタスクから削除して再度開く
- 完了
iOS のセットアップ完了
ここまで来れば iOS のセットアップは完了です。お疲れ様でした。
デベロッパーツールの利用方法に進んでください。
デベロッパーツールの利用方法
Android
Android 端末で Chrome を立ち上げてデバッグしたい Web ページを開いておき、PC の Chrome で chrome://inspect/#devices を URL バーに入力して開くと、以下の画像のように接続中の Android 端末と Android 端末の Chrome アプリで開いている Web ページの一覧が出ます。
この状態で、デバッグしたい Web ページの inspect のリンクをクリックすると以下の画像のようにいつも皆さんが見ているデベロッパーツールが表示されます！
iOS
Safari もしくは Chrome を立ち上げてデバッグしたい Web ページを開いておき、PC(macOS) の Safari で「開発」→「接続している iPhone 名」→「デバッグしたい Web ページ」の順に進んで貰えば
はい！こちらも以下の画像のようにいつも皆さんが見ている Web インスペクタが表示されます
WebView 絡みのおまけ
今回はブラウザアプリにフォーカスしたけど...
実は、同じ手順でセットアップを完了させてしまえば、WebView で開いている Web ページも同じようにデバッグできます！
ただ、注意事項があります。
- Android
- 使えるのは Android 4.4 以上の端末
- Debug ビルドのアプリであること
- WebView 側の設定でデベロッパーツールでのデバッグを有効化するコードを仕込む必要がある
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
- iOS
- Debug ビルドのアプリであること
アプリでも開く Web ページとか開発している人は、是非アプリを開発している人に共有して準備してもらってください！
ハイブリッドアプリの開発とかやってると...
WebView に独自の User-Agent を設定していることがほとんどです。
Web ページ側で User-Agent 見てブラウザからのアクセスなのかアプリからのアクセスなのかの判定に使ってたりしますよね？
これ、PC ブラウザでも User-Agent を書き換えることで再現できるんですよ。
Chrome ならデベロッパーツールの Network Conditions から、Safari なら Web インスペクタの左上の四角いアイコンから利用できる設定の中に User-Agent を書き換える項目があって、両方とも「その他」を選択すると自由入力の入力欄が出るはずなので、そこに WebView で設定している User-Agent を入れてリロードすれば、アプリで開いている時のみ表示しているボタンとか文言とか、逆にアプリでは表示しないヘッダー等の UI とかを PC ブラウザ上で反映させられます。
知らなかった人は、こちらもぜひ試してみてください。
最後に
久しぶりに記事書いたので、疲れました〜。
内容的には、いろんなところで書かれているものになりますが、改めて自分で検証しながらって言うのも大事ですね。
正直、iOS の Chrome も Safari で Web インスペクタを見ることができるっていうのは今回調べてみて初めて知りました。
トラストバンク Advent Calendar 2024では、まだまだ記事を公開予定ですので、お楽しみに。
また、弊社トラストバンクでは様々な職種で絶賛採用中です！ 気になった方、是非お気軽にWantedlyからご連絡ください！
それでは、長文読んでくださりありがとうございました！またどこかでお会いしましょう