はじめに
ゆとり世代の中野です。
さっそくチャレンジについて書いていきます。
チャレンジする背景
- iPhoneでしか再現しないUIのバグがあり実機検証したい
チャレンジ内容
- local環境でiPhoneの実機を使って検証できるようにしたい
やったこと
MacのlocalhostにiPhoneでアクセスする方法
- iPhoneとMacを有線で繋ぐ
- iPhoneとMacを同一のWi-Fiに接続する
- 起動コマンドで明示的にHostを宣言する(Nodeの例)
HOST=0.0.0.0 npm run dev
- MacのIPを調べてポートを指定してアクセスする
http://MacのIPアドレス:ポート番号
iPhoneで検証する
- 以下の手順を行うとSafariのデベロッパーツールが起動してデバッグすることができる
iPhone で設定
=>Safari
=>詳細
=>Webインスペクタ
をオンにする。 Mac の Safali で環境設定
=>一般
=>メニューバーに開発メニューを表示
にチェック開発
から iPhone を選んで見たいページを選択
localhost をスマホ実機で確認する方法 - Qiita
前置き ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。 サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。 そんなときに、localhost で起動中のページに直接アクセスするには以下...
qiita.com
結論
- 無事に検証できるようになった
さいごに
- 色々なやり方があって混乱したので次やる時の忘備録にしたい
【2021年最新】実機iOSでSafariのwebページをデバッグしよう。
Safari Webインスペクタ実機のiOS端末(iPhoneなど)を使い、作成中のwebページの動作を確認したい時があると思います。そんな時はSafariのWebインスペクタという機能を使いましょう。設定と使い方のご紹介!iPhoneの設

kakke.site

yutanakano
WEBエンジニア
大阪生まれのゆとり世代です
趣味はバイクでツーリングに行くこと
愛車は Ninja ZX-25R SE KRT EDITION
Expoでプロダクトを作っています