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