まず大前提として、iPhoneのSafariが全盛期のIE並みにイケてないことが全ての始まり。
????「全てのsafariを、生まれる前に消し去りたい。全ての宇宙、過去と未来の全てのsafariを、この手で」
— 蜜葉 (@mitsuba_yu) 2021年1月24日
iPhone/Safariの挙動が他のブラウザと違いすぎて、Chromeの開発者ツールのモバイルビューだけじゃ再現できないことがちらほらあったりする。
でも、作ってるWebをAzureにデプロイが終わってから、Safariで確認して、あーイケてないな、直そう、デプロイしよう、あーまだイケてないな直そうのループがめちゃくちゃダルい。
なんとかしたいよね、っていうのが今回のお話。
今回、ポイントは２つあって、
・Visual Studioでデバッグ実行中のWebを同じLANの他デバイスからでも見れるようにする。
・iOS SafariのWebインスペクタ機能を使って、Mac Safariの開発者ツールから、iOS Safariに表示されてるWebを操作する。
をあわせてやるかんじ。
色々調べてみると、１個目のはVSDevなMVPの @jsakamoto さんが記事書いてたのを真似したらできた！
さすがさかもとさんやで。。。。
devadjust.exblog.jp
ざっくりやると、プロジェクトのプロパティを
このデフォルトからー
これに変えた。
１．ブラウザーの起動にチェック入れて、任意のURL（今回はデフォルトを使い回すから、locakhost:5001）を入れる。
２．環境変数に「ASPNETCORE_URLS」を作って待ち受けるURLを入れる（今回は何でもいいから＊でポートだけ指定）
３．Webサーバーの設定を消す。
ってかんじ。
で、デバッグ実行してWindows Defenderが怒ってきたら正解。
これでLAN内にサーバーが立ってる状態のはず。
そうすると、同じLANのMacだったりiPhoneから、WindowsのIPでブラウザで叩けばページが表示される。
よし、ここまでで、ポイント１がクリア。
・Visual Studioでデバッグ実行中のWebを同じLANの他デバイスからでも見れるようにする。
で、２をやってく。
まず下準備にiPhoneの設定 -> Safari -> 詳細からWebインスペクタをONにする。
あとはiPhoneをMacにつないで操作したいページにアタッチすれば
いつもどおり、Webインスペクタが使える。
これで、Safariを倒す準備はできた！！！！
けど、それでもやっぱりSafari対応はだるい。
（特にCSSな。。。。。）
