みなさん、おはようございます
！
@f0lstです！
今日は、スマホでlocalhostで開発しているサイトを確認する方法をお伝えします
！
結論から言わんかい
さて、結論から言いましょう！(仕事できる〜)
結論
http://{自身のIP}:{ポート番号}
です！！！
では、少し寂しいので...
ここからは詳細お話しします
IPの確認方法 (Macの場合)
1. MacのメニューバーにあるWi-FiのマークからWi-Fi設定をクリック
OSによって表示が違う場合がありますが、おそらく一番下に出てるやつです(適当)
2. 接続しているWi-Fiの詳細をクリック
この辺りもOSによって表示が違う場合があります。
スクショはVenturaのものです。
3. 表示されるIPを確認
4. アクセスするURLを作る
http://{確認したIP}:{ポート番号}
実機での確認は以下の手順がおすすめ！
- 👆の4で作成したURLをPCのChrome等のブラウザで開く
-
QRコードを作成
- Chromeなどは拡張機能なしでQRコードを作成できるのでおすすめです！
まとめ
開発はやはり実機検証がとても大事です！
DevToolsを使った検証では起きなかった問題が、実機で起こる...
なんてあるある中のあるあるですからねえ〜
個人開発では特にlocalでの開発が多いと思いますので、ぜひお役立てください〜！！
ちょっと宣伝
普段はQiitaで、しんちゃん構文を使った記事を書いてます
！
よければそちらもご覧くださいませ〜！
