軽めのテストなら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とか付けるかも