iPhone・iPadの開発者ツールをMacで使う方法

結論：iPhone・iPad単体ではなく、MacのSafariから実機を検証する

iPhone・iPadのSafariで表示されるページを詳しく確認したい場合は、MacのSafariにあるWebインスペクタを使います。iPhone・iPad側でWebインスペクタを有効にし、Macと接続すると、MacのSafariから実機のHTML、CSS、コンソールなどを確認できます。

スマートフォン表示をMac上で再現するだけでは、実機特有の表示崩れや操作感まで確認できません。実際のiPhone・iPadでページを開きながら検証することで、実機でしか分からない問題を見つけられます。

Appleの公式手順はiOS・iPadOSのWebページを検証する方法でも確認できます。

準備するもの

• MacとSafari
• Safariを使えるiPhoneまたはiPad
• MacとiPhone・iPadを接続するケーブル

画面の名称や設定場所は、iOS・iPadOS・macOSのバージョンによって多少異なる場合があります。この記事では、現在のSafariでの基本的な流れを説明します。

iPhone・iPadでWebインスペクタを有効にする

まず、iPhone・iPadでWebインスペクタを有効にします。

1. 「設定」を開きます。
2. 「アプリ」から「Safari」を開きます。
3. 「詳細」を開きます。
4. 「Webインスペクタ」をオンにします。

iOS・iPadOSのバージョンによっては、「設定」>「Safari」>「詳細」の中にWebインスペクタがあります。

MacのSafariで開発者向け機能を有効にする

次に、MacのSafariで開発者向け機能を有効にします。

1. MacでSafariを開きます。
2. メニューバーから「Safari」>「設定」を開きます。
3. 「詳細」を開きます。
4. 「Webデベロッパ向けの機能を表示」などの項目を有効にします。

設定が有効になると、Safariのメニューバーに「開発」メニューが表示されます。

MacとiPhone・iPadを接続する

iPhone・iPadのロックを解除した状態で、Macとケーブルで接続します。iPhone・iPadに「このコンピュータを信頼しますか？」と表示された場合は「信頼」をタップし、必要に応じてパスコードを入力します。

対象のページをiPhone・iPadのSafariで開いておきます。

接続できると、MacのSafariの「開発」メニューにiPhone・iPadが表示されます。

接続した端末が表示されない場合は、次の点を確認してください。

• iPhone・iPadのWebインスペクタがオンになっている
• iPhone・iPadのロックが解除されている
• MacとiPhone・iPadを信頼済みである
• 両方のSafariで対象ページを開いている
• ケーブルを接続し直す

MacのSafariから実機のページを開く

MacのSafariで「開発」メニューを開き、接続したiPhone・iPad、その中に表示されているSafariのページを選択します。

Webインスペクタが開き、iPhone・iPadで表示しているページのHTMLやCSS、JavaScriptの動作を確認できます。

初回接続時や環境によっては、端末の認証や信頼の確認が必要です。

WebインスペクタでHTMLを確認・編集する

検証したい要素を選択する

Webインスペクタを開いたら、左上の要素選択ボタンをクリックします。その状態でiPhone・iPadのページ上にある確認したい箇所を選択すると、対応するHTML要素が表示されます。

例えば、見出しや本文の要素を選択すると、該当するHTMLの位置を確認できます。

HTMLやテキストを一時的に変更する

選択したHTML要素のテキストや属性を編集すると、iPhone・iPadの画面に変更結果が反映されます。

CSSを変更する

Stylesの画面では、文字色や余白、サイズなどのCSSを一時的に変更できます。例えば、文字色を変更すると、iPhone・iPadの画面にもすぐに反映されます。

Webインスペクタで変更した内容は保存される？

WebインスペクタでHTMLやCSSを変更しても、通常はWebサイトのサーバーやWordPressの記事が変更されることはありません。変更は検証中のブラウザ画面にだけ反映されます。

iPhone・iPadのSafariでページを再読み込みすると、通常は変更前の状態に戻ります。実際のWebサイトを変更する場合は、WordPress、HTMLファイル、CSSファイルなど、正しい管理場所を修正する必要があります。

実機でしか分からないこと

Mac上でスマートフォン表示を再現するだけでは、次のような問題を見落とすことがあります。

• 実機での文字サイズや改行位置
• Safari特有の表示や動作
• 固定要素や追従メニューの位置
• 画面下部の安全領域への対応
• 入力欄をタップしたときのキーボード表示
• スクロールやタップ操作の感覚
• 実際の通信環境での読み込み速度

スマートフォン表示で問題がないように見えても、実機でページを確認すると表示が崩れることがあります。iPhone・iPad向けのページを調整するときは、WebインスペクタでHTMLやCSSを確認しながら、実機の画面も同時に確認すると効率的です。

よくある質問

iPhone・iPad単体で開発者ツールを使えますか？

この記事で紹介しているSafariのWebインスペクタを使う方法では、MacとMac版Safariが必要です。iPhone・iPad単体で開発者ツールを開く方法ではありません。

ケーブル接続は毎回必要ですか？

初回はケーブルで接続して認証するのが確実です。環境によっては、接続後に「開発」メニューからネットワーク経由の接続を有効にできる場合があります。

変更したHTMLやCSSをWebサイトに反映できますか？

Webインスペクタでの変更は、実機で表示を確認するための一時的な変更です。Webサイトに反映するには、WordPressの本文やテーマ、CSSなどを別途変更してください。