モバイル向けデザインを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などでモバイル向けテーマを作るときなんかに、強い味方となってくれます。ブログのテーマをカスタマイズ・リニューアルする時などに活用してみてください!

    

関連記事

skitched-20130302-115753

[書評]ブロガーも必読。MEDIA MAKERS―社会が動く「影響力」の正体

     こんにちは。Kindle Paperwhiteで本を読みまくっているアキオ(

記事を読む

skitched-20120821-203611.png

グルメ記事を書くのに便利! ブログ更新のオススメiPhoneアプリ「するぷろ」

     こんばんは。アキオ(@akio0911)です。 今日は、iPhoneで

記事を読む

20140124-185232.jpg

akio0911と同じ絵柄の似顔絵アイコン、期間限定だったんだけど、今でもオーダーできる裏技があるらしい!

Twitterなどで使っている僕のアイコンですが、アイコン作成サービス「ふじもなおのアトリエ

記事を読む

skitched-20120415-132659.jpg

ブログを更に楽しもう! 書評「必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意」

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意posted w

記事を読む

skitched-20120907-173521.jpg

ブロガー名刺の定番!前川企画印刷さんに名刺デザインをお願いしてみた

     こんにちは。ブロガー名刺はmoo.comを愛用していたアキオ(@akio09

記事を読む

20140108-035338.jpg

ブログのプロフィールは何回目の訪問時に読まれるのか分析してみた

     先日、@original_peさんのブログにて以下のような記事を読みました。

記事を読む

skitched-20130203-154350

自分の話を聞いてもらえる場所を作ろう!書評「あっという間に月25万PVをかせぐ人気ブログのつくり方」

OZPAの表4の@ozpaさんが書いた本、あっという間に月25万PVをかせぐ人気ブログのつくり方―こ

記事を読む

20140111-103342.jpg

ブログ記事冒頭の挨拶リンクはどの程度クリックされているのか調べてみた

     こんにちは。ブログ「拡張現実ライフ」のアキオ(@akio0911)です。

記事を読む

20131105-124634.jpg

TwitterやFacebookなどで覚えてもらいやすい似顔絵アイコンを作成してみませんか?

     こんにちは!アキオ(@akio0911)です。 TwitterやFac

記事を読む

20140625-114250.jpg

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

少し前からライブドアブログで「あきお商店」というブログをやっていたんですが、このたび「卵は世

記事を読む

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

アップルの開発者向けイベント「WWDC2014」に参加するため

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑