Web開発において特定の端末でしか発生しないUI不具合は調査が難しいものです。今回はiPhone / iPadの調査を簡単にする方法を紹介します。
macOS上でXcodeのiPhoneシミュレーターを使用してDOM解析を行う手順は以下の通りです。
※本記事の環境は「macOS Ventura 13.7.8」「Safari 18.6」「Simulator 13.4」を使用しています。各種ソフトウェアのバージョンによりメニューのナビゲーション等が異なる場合がありますので、適宜読み替えてください。
0. Macを用意する
Mac端末が必須のため、ご用意いただく必要があります。
1. Xcodeのインストール
XcodeがインストールされていなければApp Storeからインストールします。
2. iPhoneシミュレーターの起動
- 「/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app」をダブルクリック。
- シミュレーターが起動したら、使用したいデバイスを選択します。
デバイスの選択はシミュレーターのメニューバーから File → Open Simulator で行います。
Simulatorのスクリーンショット画像
3. Safariの開発者ツールを有効にする
- macOS上のSafariを起動します。
- Safariのメニューバーから Safari → 設定 を選択します。
- 「詳細」タブをクリックし、「Webデベロッパ用の機能を表示」にチェックを入れます。
Safari設定画面のスクリーンショット画像
4. シミュレーターでWebページを開く
- シミュレーター上でSafariを起動します。
- 解析したいWebページのURLを入力して開きます。
Simulatorのスクリーンショット画像
5. Webインスペクターを表示する
- macOS上のSafariのメニューバーから「開発」メニューを選択します。
- Simulator → デバイス名 → ページ名 を選択します。
Safariメニューのスクリーンショット画像
- これによりシミュレーター上のSafariで開いているページのDOMを解析するためのWebインスペクターが表示されます。
SimulatorとWebインスペクターのスクリーンショット画像
まとめ
以上の手順で、macOS上でXcodeのiPhoneシミュレーターを使用してDOM解析を行うことができます。これにより、物理的なiOSデバイスを使用せずにWebページのデバッグや解析を行うことが可能です。
以上です。最後までお付き合いいただきありがとうございました。
