モバイル向けデザインをiPhoneでテストするなら、SafariのWebインスペクタが便利だよ

公開日: : 最終更新日:2013/08/15 ブログ運営

記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

    

WordPressなどでモバイル向けデザインを作ってiPhoneの実機でテストする時に、SafariのWebインスペクタを使うと便利です。

iPhone側で設定をおこなう

まずはiPhone側の設定を行いましょう。iPhoneの設定で、「Safari」→「詳細」の中にある「Webインスペクタ」をオンにします。

    

Mac側のSafariで設定を行う

次にMac側の設定を行います。Mac版Safariのメニューから「Safari」→「環境設定」をひらき、「詳細」の中にある「メニューバーに開発メニューを表示」にチェックを入れます。

    

Mac側のSafariで「Webインスペクタ」を表示する

MacとiPhoneをUSBケーブルで接続し、iPhone側のSafariでチェックしたいWebページを開いたら、Mac側のSafariのメニューから「開発」→「デバイス名」→「チェックしたいWebページ名」を選択します。

    

DOMツリーをチェックする

Mac側のSafariで「Webインスペクタ」ウィンドウが表示されるので、「ソースコード」をクリックして「DOMツリー」に切り替えてみましょう。

    

特定の要素をクリックすると、

    

iPhone側のSafariで、対応する箇所がハイライト表示されます。

    

書き換えた結果をリアルタイムに確認可能

Mac側のWebインスペクタで内容を書き換えると、

    

iPhone側のSafariへリアルタイムに反映されます。これは便利ですねー。

    

ネットワーク要求にかかっている時間をタイムラインで確認できる

また、各ファイルのネットワーク要求にかかっている時間などをタイムラインで確認することもできます。

    

アキオはこう思った。


    

この機能は、WordPressなどでモバイル向けテーマを作るときなんかに、強い味方となってくれます。ブログのテーマをカスタマイズ・リニューアルする時などに活用してみてください!

    

関連記事

サンフランシスコのピア39にあるチャウダーズでクラムチャウダーを食す!

lolipop アップルの開発者向けイベント「WWDC2014」

ミスドのカルピスドーナツとカルピスポンデリングを食べてみた!

ミスドで期間限定のカルピスコラボ商品「カルピスドーナツ」と「カルピ

十三カレー計画で牛すじカレーネギのせを食す!(大阪・十三)

「iPhoneアプリ開発キャンプ@大阪」のランチで、十三カレー計画

大阪・難波の加寿屋 法善寺でかすうどんを食す。ランチタイムはおにぎり2個まで無料!

大阪・難波の加寿屋 法善寺 (かすうどん KASUYA)で、かす

ライブドアブログで運営していた「あきお商店」を「卵は世界である」に改名しました

少し前からライブドアブログで「あきお商店」というブログをやって

→もっと見る

PAGE TOP ↑