💢

[Tips] localhostのサイトをスマホで見る

1 min read

常識だったらごめんなさい(-< -)

言われてみれば確かにねって感じなのですが、たまたま試してみたらできたので共有します。
結論をいうと、
「プライベートアドレスにポート番号付けて携帯でアクセスすれば見れる。」 です。

Windowsだったらプライベートアドレスはipconfigで確認できます

> ipconfig
Windows IP 構成
/// 略
Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   リンクローカル IPv6 アドレス. . . . .: fxxx::fxx1:70x:xxx:xxf3xx2
   IPv4 アドレス . . . . . . . . . . . .: 192.168.0.3  <- これです!
   サブネット マスク . . . . . . . . . .: 255.255.255.0
   デフォルト ゲートウェイ . . . . . . .: 192.168.0.1
/// 略

WSL使っている人はhostname -Iで出てくるIPアドレスです。(多分)
(注:WSLのIPアドレスは起動するたびに代わるのでお気をつけて)
Linuxの人はip aやら、ifconfigやら、hostname -Iで手に入ると思います。
Macは知らん。

そのアドレスに、アプリで使ってるポート番号指定するとスマホでそのまま表示が見れます。
例えばnpm startして、localhost:3000で開発しているとすると。今回は自分の場合
192.168.0.3:3000をブラウザの検索バーに入力することでスマホでそのまま表示できます。

他の人ってどうやって確認しているんでしょうか?
コメントとかでよかったら教えてください!

あとがき

いままで、開発者ツールのみを信じてスマホ表示を確認していたのですが(勿論ここで確認できるのは表示の大きさとかだけでしょうけど)、最終的なsa〇〇riだとかの表示に悩まされていました(いや、reset.cssとかもちろん使ってますよ??)
今回のやり方だと、他のツールとか使わなくていいので楽でした!

スマホのSafariで試して、たまたま気づいたのですがコード編集して保存すると、PCと同じくスマホの表示もホットリロードされました。(React appで確認)

知らなかった~!っていう無知仲間の方は是非試してみてください!

Discussion

ログインするとコメントできます