iPadのブラウザデバッグはXcodeが便利だった話

久しぶりに最近、ブラウザデバッグをする機会がありました。

で、問題となったのは「viewport」の部分。

window幅がタブレットの領域(768-1024px)の場合は、viewportのwidthを固定して、PC版を表示させる処理を書いておりました。

しかし、Safariの開発者ツールでデバッグしているとなんか効いていない感じのご様子..chromeではしっかり効いているようなんですけどね。

ということで「iPad実機でデバッグしよう！」となったのですが、絶賛リモート中なので残念ながら実機が手元にありませんでした..

で、聞くところによるとXcodeのシミュレータがかなり優秀らしく、実機レベルの再現度 + 立ち上げたシミュレータをSafariでデバッグできるとのこと。

では、手順紹介です。

1. Xcode開く

2. 下記からシミュレータ開く

3. シミュレータにカーソル合わせてデバイスを選ぶ

4. Safari開く
※Safariの開発者ツールが最近調子悪いので、Safari Technology Previewの方がおすすめです
developer.apple.com

5. Safariで開発者ツール開く

6. デバッグ開始

的な感じでかなり手軽に実機に近い形でデバッグすることができます。

開発段階のブラウザデバッグはこれでよさげ。