localhost をスマホ実機で確認する方法

前置き

ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。
サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。

そんなときに、localhost で起動中のページに直接アクセスするには以下の手順を踏むことで確認ができます。

localhost をスマホで確認する方法

1. 同じ Wi-Fi に PC / スマホで接続する
2. PC のIPアドレスを確認する（Mac の場合は システム環境設定 => ネットワーク など）
3. localhost を PC で起動
4. スマホで IP:ポート番号 にアクセス（192.168.1.1:8080 など）
5. 見られる！

開発者ツールの使い方

端末の種類などによっては多少手順が変わったりするかもしれないのであしからず

iPhone Safali のWebインスペクタを使う

iPhone - Mac だと、Safali の Webインスペクタ(developer tool) が使えます。

1. iPhone と Mac を有線接続
2. iPhone で 設定 => Safari => 詳細 => Webインスペクタをオンにする。
3. Mac の Safali で環境設定 => 一般 => メニューバーに開発メニューを表示にチェック
4. 開発 から iPhone を選んで見たいページを選択

Android Chrome のデベロッパーツールを使う

Android だと以下のような手順になります。

1. 端末情報 > ソフトウェア情報 > ビルド番号を7回タップ（開発者向けオプションが出るようになる）
2. 設定 > 開発者向けオプション > USBデバッグをONにする
3. USB接続
4. (Windowsの場合)端末のドライバのインストール
5. chrome://inspect/#devices にアクセス（アドレスバーにコピペ）
6. 表示された使用端末名/確認したいページのinspectをクリック

環境や端末によってはうまく表示されないこともあるみたいです。
余計なソフトが邪魔していたりとか。

あとがき

エミュレータで全部済めばいいんですけどね。なんで実機だとバグるんだろ
あと、最近だと実機での確認をオンラインでできるようなサービスもあるので、金銭面で折り合いがつくようであればそういうのも試してみてもいいかもしれないですね。