Windowsユーザーでもsafariのデバッグがしたい、iPadで。

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の流れ

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

MIHTool Basicの流れ

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

更新予定

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