ローカルの開発環境（localhost）をスマホ実機で確認する
とある案件で、PCとAndroidは問題ないけど、iPhoneだけ表示がおかしい、という事象があり、ローカルの開発環境（localhost）をスマホ実機で確認したので、手順をまとめておこうと思います。
Chromeなど、各種ブラウザでも開発者ツールというものがあり、スマホの場合の見え方をある程度は確認できますが、稀にレイアウトがすれてくるケースがあったり、スクリプトが絡むとOSによって挙動が変わってきたりする場合があります。
事象
日付を判定している処理で、iPhoneだけ表示がおかしかったという事象です。
処理を見てみたら、TypeScript（JavaScript）で、new Date()で日付を生成して比較するというのをやっていました。
原因
iOSのnew Date() は、他と挙動が異なるようで、どういう文字列から日付を生成しているかで、挙動が違ってきます。
詳しくは、まとめていらっしゃる方がたくさんいるので、検索してみてください。
↓参考
今回の案件では、
2024/08/31(土) 23:59
という文字列から、日付を生成していて、(土)という曜日の表記が引っかかって、日付の生成でエラーになっていました。
スマホ実機での確認方法
さて、ここからが本題です。
今回のようなOSに起因する事象は、ブラウザの開発者ツールを使用して確認しても、事象は再現できません。
そこで、ローカルの開発環境（localhost）をスマホ実機で見てみます。
スマホ実機で見るとなると難しいそうな印象ですが、とても簡単で、PCとスマホを同じネットワーク（Wi-Fiなど）に接続するだけです。
そして、接続しているPCのIPアドレスを確認します。
例えばMacでWi-Fiに接続している場合、以下のようにWi-Fiの設定から確認します。
（接続しているWi-Fiの詳細ボタンをクリック）
IPアドレスが確認できたら、スマホのブラウザのURL欄にIPアドレスを入力します。
必要に応じて末尾にポート番号を付与してください。
これでスマホ実機から確認することができます。
コンソールも見たい、要素の検証もしたい場合
ブラウザの開発者ツールでは、コンソールを見れたり、要素の検証で、HTMLがどうなっているか見れたりしますが、これもスマホ実機から確認できます。
iPhone、Safariを使用すると以下のようになります。
1．PCとスマホ実機を有線で接続します。
2．iPhoneの設定から、Safariの設定を開きます。
一番下の詳細から、Webインスペクタをオンにします。
3．iPhoneのSafariで該当ページを開きます。
4．PCのSafariで開発メニューを開くと、iPhoneのSafariで開いているページが出てくるので、クリックします。
これで、PCからスマホ上で見ているページが確認できます。
例えば、Google検索を開いて、以下のように要素タブ上のHTMLを選択すると、
以下のように、iPhoneのSafariで開いているGoogle検索のページが、ハイライト表示されます。
今回は、要素を選択した例にしましたが、ここからCSSを調整したり、コンソールなども同様に、スマホで出力されたログをPCから確認することができます。