概要

開発中のWebサイトの表示確認を実機で手軽にできる方法を紹介いたします！
Android,iPhoneだと若干勝手が違うので詳しく解説いたします。

今回使用した端末

[PC]
Mac Book Pro (Monterey)

[スマホ]
iPhone SE2 (iOS 15)
Galaxy Note 8　(Android 8)

PCで接続しているURLの「localhost」の部分を、PCのマシン名に置換する必要があるそうです。

マシン名確認手順
　Macの「システム環境設定」->「共有」のコンピュータ名

※Androidの方のみWi-fi経由でのアクセスができませんでした。
なので、ここでは有線での動作確認方法を書きます。

Android端末とPCをケーブルで接続する
Galaxyの場合、USBデバッギングをONにする。
Chromeでアクセス「chrome://inspect/#devices」
上記サイトの「Remote Target」に端末名が表示されます。
上記サイトの「Port forwarding...」を押下し、ローカルホストアプリのポートフォワーディングを設定する
※Android端末側で接続するポート番号になります。

iPhoneと異なり、PCでローカルアプリに接続するURLに上記でポートフォワーディングしたポートを結合します。

※ポートフォワーディングを9000番にした場合

http://localhost:９０００/top