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

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

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

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

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

# アジェンダ

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

# 1. PCのローカル環境をiPhoneで確認する
まず最初に、自身のPCのIPアドレスを調べます。
 1. **システム設定/ネットワーク/Wi-Fi**に移動する
![Group 55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/14cf6c65-1e40-493b-f3a1-553cacff9a71.png)
 2. 接続しているネットワークの詳細を押す
下記のような画面が開かれ、IPアドレスを見つけることができます。
![Group 56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/0da5f781-d4a5-32cb-36bc-d84ada627e26.png)

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

```
npm run dev
 ➜　　　　Local:   http://localhost:5173/
　　➜  Network: http://○○○.○○○.○○○.○:5173/
```
![スクリーンショット 2023-10-01 13.07.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/80581060-3529-bd38-eee1-3d7a5392bafd.png)


 4.iPhoneで確認する
3番で表示された、http://○○○.○○○.○○○.○:5173/ にiPhoneで接続すると、下記のように、ローカル環境を見ることができる。
※自身のiPhoneがダークモードのため、黒くなっております。
![Group 57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/7c17ccec-727d-adfc-6333-31e237eabf97.png)





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

 1. Macのsafariを開発者ツールをONにする
     a. safari/設定/詳細
     b. Webデベロッパー用の機能を表示をONにする
![スクリーンショット 2023-10-01 13.27.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/f2881643-4b21-e6af-b81c-7cf7e6547df7.png)

 2. iPhoneの設定から、WebインスペクタをONにする
a. 設定/safariを選択
![S__56950818.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/24be99f5-8e62-a322-f7e3-e9ae109e9ef5.jpeg)

b. safari/詳細
    <img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/76a67076-161e-c156-57e1-d2086433ac6e.jpeg">

c. 詳細/Webインスペクタ をONにする
<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/9217b291-92e7-3eb0-70df-888fa3cb90ba.jpeg">
これでiPhoneの設定は完了です。

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


 4. MacのsafariでiPhoneを選択する
 下記のように開発タブに、閲覧したいiPhoneを選択し、サイトを選択する。
![スクリーンショット 2023-10-01 13.30.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/7d0ac547-5d9a-0d85-9ab9-f4275ef09814.png)

iPhoneの画面の開発者ツールを見ることができます。
![スクリーンショット 2023-10-01 13.24.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/d2003972-c205-95c4-6a79-39d804c4a1ab.png)

iPhoneの画面でも、選択されているのがわかります。
![S__56950804.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/310a0992-a996-5691-13ef-f6f2415d1ada.jpeg)


# その他
Mac版safariの開発者ツールを使った、iPhoneサイズの確認の仕方
開発/レスポンシブデザインモードにする
![スクリーンショット 2023-10-01 13.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/d5e99d36-b4c5-ed0d-6bb6-ba3f6f605870.png)

レスポンシブデザインモードにすることで、iPhoneサイズに合わせて確認することもできます。
![スクリーンショット 2023-10-01 14.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049661/f5e93fb5-0164-2c81-811d-e9457a9617f1.png)



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