localhost をスマホ実機で確認する方法
前置き
ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。
サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。
そんなときに、localhost で起動中のページに直接アクセスするには以下の手順を踏むことで確認ができます。
localhost をスマホで確認する方法
- 同じ Wi-Fi に PC / スマホで接続する
- PC のIPアドレスを確認する(Mac の場合は
システム環境設定
=>ネットワーク
など) - localhost を PC で起動
- スマホで
IP:ポート番号
にアクセス(192.168.1.1:8080
など) - 見られる!
iPhone Safali のWebインスペクタを使う
iPhone - Mac だと、Safali の Webインスペクタ(developer tool) が使えます。
- iPhone と Mac を有線接続
- iPhone で
設定
=>Safari
=>詳細
=>Webインスペクタ
をオンにする。 - Mac の Safali で
環境設定
=>一般
=>メニューバーに開発メニューを表示
にチェック -
開発
から iPhone を選んで見たいページを選択
Android Chrome のデベロッパーツールを使う
Android だと以下のような手順になります。
- 端末情報 > ソフトウェア情報 > ビルド番号を7回タップ(開発者向けオプションが出るようになる)
- 設定 > 開発者向けオプション > USBデバッグをONにする
- USB接続
- (Windowsの場合)端末のドライバのインストール
- chrome://inspect/#devices にアクセス(アドレスバーにコピペ)
- 表示された使用端末名/確認したいページのinspectをクリック
環境や端末によってはうまく表示されないこともあるみたいです。
余計なソフトが邪魔していたりとか。
まとめ
エミュレータで全部済めばいいんですけどね。なんで実機だとバグるんだろ
あと、最近だと実機での確認をオンラインでできるようなサービスもあるので、金銭面で折り合いがつくようであればそういうのも試してみてもいいかもしれないですね。
Author And Source
この問題について(localhost をスマホ実機で確認する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/nanarya/items/8d01dfb4de434e7b8acc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .