もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Web開発しているとデバッグは欠かせないのですが、スマホの確認、デバッグとなるとGoogle ChromeやFire Foxのデベロッパーツールがありますが、エラーや表示崩れなどチェックできますが、種類によっては実機でないと再現しないエラーもあります。

また、OSのバージョンによっても表示に一貫性がない場合があります。仕様・要件にもよりますが、最低でも最新のOSと一つ前のメジャーOSでのデバッグは必要です。

ここでは、AppleのXcodeのiOSシミュレータを使ったSafariのデバッグの方法を解説します。

iOS Simulatorとは

iOS Simulatorは、Xcodeに付属されていて、シミュレーションテストができるものアプリです。MacはApp StoreからMac、iPhone、iPad向けのアプリ開発に使われるXcodeが無料でインストールできます。

App StoreからXcodeをダウンロードする

App Storeアプリを起動して「Xcode」で検索して、ダウンロードしてください。
アプリはかなりのボリュームがありますので、気長にお待ちください。

XcodeからSimulatorを起動する

Xcodeメニューから「Open Developer Tool」→「Simulator」を選択するとSimulatorが起動します。
Simulatorの中のSafariを起動してデバッグするURLを入力してデバッグします。
Safariの開発メニューからもSimulatorを使ったデバッグが可能です。

コンポーネントを追加する

最新バージョンのiOSに加えて、一つ前のバージョンでもデバッグする場合、コンポーネントを追加することで旧バージョンのiOSでデバッグができます。