概要
iPhone 実機と Mac を接続して、Safari で開発者ツールの確認方法を説明します。
環境
macOS: Monterey
ver: 12.3.1
手順
用意
- 接続ケーブル
- iPhone
- Mac
iPhone 側
1. iPhone の設定から「Safari」を選択
2. 下の「詳細」を選択
3. 「web インスペクタ」を ON に変更
4. 確認したいサイトを Safari で表示
今回は以前に自分で作成した日本百名山一覧で確認します。
Mac 側
1. まず Safari を立ち上げて、
「環境設定」→「詳細」→ 「メニューバーに"開発"をメニューを表示」にチェックボックスをチェック
2. 開発メニューから、接続している iPhone を選択し、確認したいリンクを選択
3. 開発者ツールが開き、こちらで確認
4. 完了
参考
- 今回確認に使用したサイト
日本百名山一覧 - 最近発見した Chrome の拡張機能（本記事とあまり関係ないですけど、すごく便利です。）
レスポンシブの確認が簡単に！ iPhone, iPad, Android など各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター