富山のシステム開発・Web制作会社

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

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

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

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

2.MacとiPhoneをケーブルで接続

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

3.MacのSafariから1で開いたサイトを選択

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

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

4.デバッグを実施

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

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

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

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

この記事を書いた人
Front-end Engineer

よく読まれている記事

Laravel Sailで開発環境を構築する

【jQuery】アクセスごとに動画とポスター画像をランダム表示させる方法

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

TensorFlow Lite Model Makerでカスタムモデルを作成する

LaravelとBackpackで構築した管理画面をカスタマイズする

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

LaravelとBackpackで管理画面を爆速で構築する

アクセス数バク上がり!MARBLEのアクセス数増加方法を大公開!

Flutter SDKのバージョンをプロジェクト別に指定する

メタバースとWEB3.0について

関連記事

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

Safariでclamp()が効かない場合の対処法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話