iOSをデバッグするSimulatorのtips

モバイルサイトを作成する際、実機確認は欠かせません。
MacOS であれば Xcode.app をインストールすれば Simulator.app というシミュレーターアプリも同梱されており、ほぼ実機に近い検証を行うことができます。本来はアプリ開発に使うものですが、Web サイトの検証にも使えます。

今回は Simulator の tips をまとめました。

ブラウザからドラッグ＆ドロップで同じページを開く

ブラウザのアドレスバーもしくはアドレス左のアイコンをドラッグ＆ドロップすると、ブラウザーで開いているページを Simulator でも開くことができます。

クリップボードも共通されているので、コピー＆ペーストもできます。

デベロッパーツールでデバッグする

Simulator のページをデベロッパーツールでデバッグすることができます。
デバッグには Safari を使用します。

設定 > 詳細 から 「メニューバーに“開発”メニューを表示」にチェックを入れます。

メニューバー「開発」メニューから、Simulator を開いていればサイトのタイトルが表示されているので選択します。

あとは Safari のデベロッパーツールと同様の操作で Simulator をデバッグすることができます。

動画のキャプチャを撮る

画像のスクリーンショットはメニューバーのカメラアイコンか Cmd + Shift + 4 で Simulator のウィンドウを選択すれば保存できますが、動画の撮影をすることもできます。

動画の撮影はターミナルからコマンドを実行します。

xcrun simctl io booted recordVideo video.mov

上記コマンドでターミナルのカレントディレクトリに video.mov が保存されます。
撮影を停止する場合は、ターミナルから Control + C で停止します。

ダークモードに切り替える

ダークモードの挙動も確認することができます。

設定アプリに Developer という項目がありますので選択し、その中の「Dark Appearance」をオンにします。

まとめ

MacOS でのWeb開発のメリットはこの Simulator の存在も大きいと思います。
Apple製品はバリエーションが豊富なので非常に助かります。

次回は Android をデバッグする Emulator を紹介する予定です。