iPhoneのSafariでデバッグする方法

実機端末を使用したデバッグ方法をご紹介します。
使用するのはMacとiPhoneです。簡単に行えるので、まだご存じない方はぜひ試してみてください。

1．実機でデバッグしたいサイトを開く

まず、デバッグしたいサイトをiPhoneのSafariで開きます。
プライベートタブで開いても大丈夫です。

お手持ちのケーブルでMacとiPhoneを接続してください。
この時、iPhone側で「このコンピュータを信頼しますか？」と警告が出た場合は「信頼」をタップしてください。
「信頼しない」を選択した場合は開発メニューに接続したiPhone名が表示されないため注意してください。

MacのSafariを起動し、「開発」>「接続したiPhone名」>「デバッグしたいサイト名」をクリックします。

この時、開発メニューが表示されていない場合は、Safariの環境設定>詳細>「メニューバーに"開発"メニューを表示」にチェックを入れます。

Webインスペクタが起動するので、iPhoneを確認しながらソースの修正やエラーの有無などを確認することができます。

例えば、ハンバーガーメニューのHTMLを選択すると、

iPhone上で該当箇所が選択された状態になります。
実機で修正される様子を確認しながらデバッグが行えるので便利です。

ぜひ試してみてください。

MIYANO SATOMI Front-end Engineer / 宮野聡美

記事をもっと見る

Our Signature Products, Born from Insight.

お客様の課題を起点に、MARBLEが自ら構想し、
仕組みからデザイン、開発、運用まで一貫してつくり上げたプロダクト群です。
業務改善、運営効率化、新たな顧客体験の創出など、
企業の事業成長に直結する“実装された解決策”を形にしています。