web_inspector008

iPhone実機で表示させたスマートフォン向けサイトをMacでデバッグする方法を試してみました。

普段はChromeのディベロッパーツールを使い、ユーザーエージェントやデバイスサイズを指定して変更点を見ていたのですが、実機でないと分かりにくい細かい部分を見るのにとても便利です。

スポンサードリンク

実機テストにはMacとiPhoneが必要

web_inspector001

まずはMac側のSafariを開いて、環境設定の詳細から”メニューバーに”開発”メニューを表示”のチェックを入れます。次にiPhoneとMacをUSB接続します。

web_inspector002

続いてiPhone側の設定を行います。設定アプリを開き、”Safari > 詳細”と進み、Webインスペクタのスイッチをオンにします。

web_inspector004

Mac側のSafariで上部のメニューバーから”開発”を選択し、USB接続しているデバイスが表示されるのでクリックします。この場合は”iPhone” > “i-i-news.com”。デバッグ対象のサイトをiPhone側のSafariで表示しておく必要があります。

web_inspector005

Webインスペクタが表示されるのであとは自由に触っていくだけです。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。