はじめに

チャレンジする背景

• 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でプロダクトを作っています