Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

あわせて読みたい
Chromeのデベロッパーツールの使い方を徹底解説【コーディングに必須!】
Chromeのデベロッパーツールの使い方を徹底解説【コーディングに必須!】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

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

iPhoneの実機でデベロッパーツールを使う手順

  • iPhoneの設定でWebインスペクタを有効にする
  • MacのSafariでデベロッパーツールを表示可能にする
  • iPhoneとMacをケーブルで接続
  • MacのSafariでデベロッパーツールを開く

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

 

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

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

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

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

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

 

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

次はMac側の設定です。

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

Safari:設定を開く

Safari:設定を開く

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

iPhone画面

iPhone画面

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

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

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

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

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

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作