軽めのテストならplaywrightもおすすめ

https://zenn.dev/kagaya_22/articles/8e4569618f8e0b
このような感じでwindowwsでもsafariテストができる。
Nodeはポータブルにも構築できるので、バッチファイルを一度作ってしまえば比較的簡単に使いまわせるぞ。
どうしても実機でないと再現しない場合は以下記事内容を参照しよう。

iPhoneやiPad、macのsafariで崩れるから直してほしいと言われます

おそらくsafari側の問題なんだと思います。でもこっちにはWindows機しかないです。
手元にかろうじてあるのは古いiPad。
iPadでお手軽にデバッグできないものかと試行錯誤して、やっとデバッグの道のりが見えたのでメモ。

用意するもの

iPad (proなどでかい、早いほうがいい、iPhoneでも可)

どうしてもappleのデバイスは必要です。
Mac本体を買うよりは、イオシスとか中古屋で安いiPad買ったほうが早いです。
後述のアプリをインストールするだけで使えるので。
iPad Air以降じゃないと速度的に辛いと思います。

iOS単体でのデバッグを可能としてくれるアプリ

Inspect Browser
https://apps.apple.com/app/apple-store/id1203594958

メリット
- basic認証かかってるサイトもOK
- 更新も最近まで動いてる(2019/6確認)
- iPhoneシミュ可
デメリット
- 有料アプリ
- 実機インスペクターのみ、リモートデバッグはできない？

iOS単体じゃないけどリモートデバッグを可能としてくれるアプリ

MIHTool Basic - Web Debugger
https://apps.apple.com/us/app/mihtool/id584739126?ls=1

メリット
- chromeでのリモートデバッグ可能
- 無料アプリ（広告なし、Pro版は寄付目的のみ？）
- iPhoneシミュ可
デメリット
- basic認証かかってるサイトはNG、無反応になる
- 更新が2018年で止まってる
- 実機インスペクターが死んでる模様、リモートデバッグのみ？ httpsサイトがダメなのかもしれない

使い方

詳しく書いても導入動画にはかなわないので、ざっくりと。

Inspect Browserの流れ

アプリでテスト対象サイトのURLを打ち込む
テストしたいデバイスを選んで画面サイズを変更する
「タップして要素選択」的なボタンを押したあとサイトの要素をタップしてcssなどのデバッグをする。

MIHTool Basicの流れ

アプリでテスト対象サイトのURLを打ち込む
iPhone表示をテストしたければ「emulate iPhone」的なボタンで画面サイズを変更する。
メニューの上の方にある、「サーバーを立てる」的なところに表示されているURLをWindowsのChromeで開く
ChromeとMIHtoolの両方を一応リロードして、Chrome側の画面の「Targets」に表示される文字列をクリックして緑色？に光らせる
実機MIHtoolの表示を見ながら、Chromneの「elements」タブの要素をマウスオーバーしていくと、MIHTool側の表示が現在Chromeで選択している要素を光らせて教えてくれる
要領を掴んだら、Chrome側の開発者ツールでインスペクトしてCSSを修正する

更新予定

いま時間ないのであとでSSとか付けるかも