WEBページの実機検証を行う方法について、忘れがちなため備忘録として。
WEBページを検証する方法
iPhoneのWEBインスペクタという機能を利用して、WEBページの検証を行います。
Webブラウザなどの開発者向け機能の一つで、表示中のWebページを構成するファイルや、HTMLやCSS、JavaScriptなどのソースコード、各要素のスタイルや属性などの詳細を表示するツールをWebインスペクタあるいは単にインスペクタという。
iPhoneの設定
① iPhoneの設定を開きsafariの設定へ
② safari設定画面下部の詳細を選択
③ WEBインスペクタの設定タブをオンにする
iPhoneの設定はたったこれだけです。
閲覧したいサイトをiPhoneのsafariで開き、PCとiPhoneをケーブルで接続します。
PCの設定
① PCとiPhoneを接続したら、PCのsafariを開く
② safariメニューの開発を選択
③ 接続しているiPhoneを選択し、iPhoneのsafariで開いているWEBサイトを選択
検証
これで閲覧したいWEbサイトのSPのコードをPCのsafariで検証することができます。
ローカルサーバを実機検証する方法
iPhoneからローカルホストにアクセスし、検証する方法です。
ローカルホストで制作したページを開いている前提で進めていきます。
PCの設定
① 【システム環境設定】を開き、ネットワークを選択
② IPアドレスを確認します
iPhoneの設定
① iPhone設定を開き、Wi-Fiを選択
② 接続しているWi-Fiの【！】マークを選択
③ 画面下部のプロキシを構成を選択
④ 【手動】→【サーバ(PCのIPアドレスを入力)】→【ポート (ローカルホストのポート番号入力)】
⑤ 入力が完了したら保存をする
---- あとは【WEBページを検証する方法】と同じく下記を設定
⑥ iPhoneの設定を開きsafariの設定へ
⑦ safari設定画面下部の詳細を選択
⑧ WEBインスペクタの設定タブをオンにする
iPhoneからローカルホストに接続
【PCのIPアドレス】:【ローカルホストのポート番号】 (例) 123.123.0.12:8000
をsafariのブラウザで開くとローカルホストにiPhoneから接続できます。
PCの設定
① PCとiPhoneを接続したら、PCのsafariを開く
② safariメニューの開発を選択
③ 接続しているiPhoneを選択し、iPhoneのsafariで開いているIPを選択
検証
これでローカルサーバの実機検証が行えます。
検証が終わりましたら、設定を元に戻しておくことを忘れないようにしてください。
以上 iPhone safariでの実機検証でした。