iOSをデバッグするSimulatorのtips


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

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

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

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

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

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

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

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

Safari 詳細メニュー

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

Simulator のデベロッパーツール

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

動画のキャプチャを撮る

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

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

xcrun simctl io booted recordVideo video.mov

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

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

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

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

Settings > Developer から Dark Appearance をオン

まとめ

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

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

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。