iOS Simulatorを使用してMacでスマホ表示を確認する方法【Safari17以降】

Enabling the Inspection of Web Content in Apps Web Inspector is a powerful tool that allows you to debug the layout of web pages, step through JavaScript, read messages logged to the console, and more.

※「Working with older versions of macOS and iOS」の項目

MacのSafariでスマホの表示を確認する手順

レスポンシブデザインモードの「シミュレータで開く」＞「シミュレータを追加…」を選択すると、Safariのドキュメントが開かれるのですが、まぁ英語英語でよくわからない。ドキュメントによると、デバイスの追加には XCode を使用するようです。

XCodeのインストール Simulaterにデバイス追加

XCodeのWindowメニュー＞Devices and Simulators＞左側のSimulatorsタブから各種デバイスを選択。

Device Type（機種）とOS Version（バージョン）を任意の内容に指定して「Create」。ここでのポイントとして、Simulator Nameをデバイス名＋バージョンにしておく と、後々便利です。

Simulatorの使い方デバイスの事前準備

XCodeメニュー＞Open Developer Tool＞SimulatorでSimulatorを起動。

Safariからデバイスを確認する

どうやら 一度シミュレータを立ち上げたことのあるデバイスのみが、Safariのリストに上がってくる 模様。

Simulatorの立ち上げとWebインスペクタを使用する

【追記】エラーの解消方法

先日、Simulatorを再び使用しようとしたところ、「 Unable to boot the Simulator. 」というエラーが表示され、Simulatorが起動しなくなっていました。

システム設定アプリ＞一般＞ストレージ＞ディベロッパを開く
Xcodeプロジェクトビルドファイルの「Xcodeキャッシュ」を削除

まとめ

私自身は、 レスポンシブデザインモードが変わった→代わりにXCodeのSimulatorを使用する という流れにスムーズに辿り着けず、またドキュメントやツールが英語ばかりで時間がかかったので、これから同じような状況になった方のために残しておくことにしました。

今回のことで、 OSのバージョン別でもMac上でシミュレーションできること を知り、手元にない端末でも検証できるようになったのは、便利だなぁと感じてます。

📎📎📎📎📎📎📎📎📎📎