iPhone(スマホ実機)でデベロッパーツールを使う方法【MacのSafari使用】

iPhoneでデベロッパーツール(検証ツール)を使う方法ってない？

コーディングしている時は、デベロッパーツール(検証ツール)を使う人が多いと思います。

そして最終確認ではiPhoneの実機でデザインが崩れていないかチェックをすると思いますが、もしiPhoneだけ崩れていたら、パソコンではなくiPhoneでデベロッパーツールを使わないと原因が分かりません。

そこで今回は、iPhoneの実機とMacを使ってデベロッパーツールを使う方法を解説します。

パソコンでのデベロッパーツール(検証ツール)の使い方は、以下の記事を参照下さい。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

iPhone(スマホ実機)でデベロッパーツールを使う方法

iPhoneの実機でデベロッパーツールを使う手順は、以下になります。

それでは順番に解説していきます。

手順①：iPhoneの設定でWebインスペクタを有効にする

まず最初に、iPhoneの設定から『Safari → 詳細 → Webインスペクタを有効にする』の順に進めます。

iPhoneの設定『Safari → 詳細 → Webインスペクタを有効にする』

元々、有効になっていればそのままでOKです。

手順②：MacのSafariでデベロッパーツールを表示可能にする

次はMac側の設定です。

デフォルトではMacのSafariでデベロッパーツールは表示されないので、Safariを開いた状態で『設定』を開きます。

Safari：設定を開く

設定で『詳細 → Webデベロッパ用の機能を表示にチェック』します。

Safari設定：詳細→Webデベロッパ用の機能を表示にチェック

手順③：iPhoneとMacをケーブルで接続

次にiPhoneとMacをケーブルで繋ぎます。

iPhoneがLightningで、MacがType-Cの場合は、以下のようなケーブルで接続します。

ここで『このコンピュータを信頼するか』と表示されたら『信頼』を選びます。

手順④：MacのSafariでデベロッパーツールを開く

iPhoneで表示確認をしたいページを開いた状態で、MacのSafariでデベロッパーツールを『開発 → iPhoneのアイコン → 開きたいページをクリック』で開きます。

MacのSafariでデベロッパーツールを開く

こちらがデベロッパーツールの画面です。

MacのSafariで開いたデベロッパーツール

そして、矢印の場所にカーソルを乗せていますが、iPhoneでは以下のような表示になります。

iPhone画面

パソコンの時と同様で、デベロッパーツールでHTMLの要素にカーソルを乗せたら、それがどこなのか分かるように表示されます。

ただし、パソコンと違ってiPhone側の画面にカーソルを乗せることはできないので、チェックしたい箇所はデベロッパーツールのHTMLから探していきましょう。

その他の使い方は特に変わりありませんが、iPhoneでチェックしたいページを開きつつMacでチェックをするという形になるので、1画面でチェックはできません。

まとめ：MacがあればiPhoneでもデベロッパーツールが使える

今回は、iPhoneでデベロッパーツールを使う方法を解説してきました。

実務では最後のチェックで使うことになると思うので、ぜひ覚えておきましょう。

Safariだけ崩れているということは、結構あることなので・・・

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！