開発者向けツールを駆使し、iPhoneでローカル環境をデバッグする方法

概要

近年、スマホの利用者が増えたため、WebアプリはPCだけでなく、スマートフォンの実装が増えております。スマートフォン実装の際に、PCのブラウザであるchromeやsafariの開発者ツールを利用し、iPhone8やiPhone12Proといった画面サイズに調節しながら、デザインを確認し実装を行います。

しかし、PCでデザイン確認をしたけれど、実際にiPhoneの実機で確認すると、
「デザインが崩れていた。けれど、開発者ツールがないから原因を追求できないorz」
という問題に遭遇することがあると思います。

そのような問題を解決するために、PCのローカル環境をiPhoneで接続し、開発者ツールで確認する方法を話していきます。

※今回は、
・viteを利用しローカルサーバを立ち上げ
・iPhoneのsafariで確認しております。

アジェンダ

1. PCのローカル環境をiPhoneで確認する
2. iPhoneで閲覧しているサイトを、開発者ツールで調べる

1. PCのローカル環境をiPhoneで確認する

まず最初に、自身のPCのIPアドレスを調べます。

1. システム設定/ネットワーク/Wi-Fiに移動する
   

2. 接続しているネットワークの詳細を押す
   下記のような画面が開かれ、IPアドレスを見つけることができます。
   

3. ローカルサーバを立ち上げる

npm run dev
 ➜　　　　Local:   http://localhost:5173/
　　➜  Network: http://○○○.○○○.○○○.○:5173/

4.iPhoneで確認する
3番で表示された、http://○○○.○○○.○○○.○:5173/ にiPhoneで接続すると、下記のように、ローカル環境を見ることができる。
※自身のiPhoneがダークモードのため、黒くなっております。

2. iPhoneで閲覧しているサイトを、開発者ツールで調べる

先ほど、PCのローカル環境をiPhoneでも見ることができた。
しかし、iPhoneの環境でデザインが崩れた際に、どのプロパティが原因か調べたい時に、iPhoneでは、開発者ツールを見ることができない。そのような問題を今から解決していきます。

1. Macのsafariを開発者ツールをONにする
   a. safari/設定/詳細
   b. Webデベロッパー用の機能を表示をONにする
   

2. iPhoneの設定から、WebインスペクタをONにする
   a. 設定/safariを選択
   

b. safari/詳細

c. 詳細/Webインスペクタ をONにする

これでiPhoneの設定は完了です。

1. MacとiPhoneを繋ぐ
   MacでiPhoneをコードで繋がないと、開発者ツールを開くことができないです。
   これがもっと便利になると良いのですが、、、。

2. MacのsafariでiPhoneを選択する
   下記のように開発タブに、閲覧したいiPhoneを選択し、サイトを選択する。
   

iPhoneの画面の開発者ツールを見ることができます。

iPhoneの画面でも、選択されているのがわかります。

その他

Mac版safariの開発者ツールを使った、iPhoneサイズの確認の仕方
開発/レスポンシブデザインモードにする

レスポンシブデザインモードにすることで、iPhoneサイズに合わせて確認することもできます。

まとめ

今回、PCでiPhoneサイズを確認しバグは無い状態でしたが、実際、実機テストを確認したところデザインの崩れを発見したことがあったので、今回のようにローカル環境で開発している状態で、iPhoneで確認することができれば、本番環境に移した際にバグは減らすことができるのではないかと思いました。