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

    

関連記事

20140317-201501.jpg

ブロガー同士で交流できるブロガーズ寿司ナイトを3月26日にやるよ!

Photo by Gerard Romans Camps      前回の「ブロ

記事を読む

bloggers-crispy-cream-night-20130909-185559.jpg

【イベレポ】ブロガーズクリスピークリームナイトを開催しました

      こんにちは!アキオ(@akio0911)です。 先日(9月6日)、渋

記事を読む

pro-blogger-20131215-154903.jpg

プロブロガーのアクセス・収入アップテクニックを知りたいなら、この本を読もう

     こんにちは。アキオ(@akio0911)です。 今日は、プロブロガー(

記事を読む

20140122-190016.jpg

イベント参加するのに個人名刺持ってないなんてもったいない!僕が使ってる名刺作成サービス教えちゃうぞ

普通に会社に勤めて働いていたりする場合、会社から支給される名刺しか持っていないのが普通ですよ

記事を読む

skitched-20130203-154350

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

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

記事を読む

20140330-015600.jpg

他のブログなどからリンクが張られたことをチェックするには、Googleアナリティクスのトラックバックレポートが便利

     他のサイトやブログなどからリンクが貼られたことをチェックするには、Googl

記事を読む

blog-20130829-173148.jpg

ブログが続かない人に伝えたい、ブログを続けるコツ

     最近「ブログを続けるコツを教えて下さい」といった質問をされることが多いので、

記事を読む

20140625-114250.jpg

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

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

記事を読む

blogger-apple-pie-night-20130529-191746.jpg

ブロガーズアップルパイナイトを開催します。あの方もゲスト参加!

Photo : The Food Pornographer      今月5月2

記事を読む

20140218-150532.jpg

ブログでいかに人生が変わったか? ブロネクに出演した感想など

2月6日、ブロガーによる映像番組「ブロネク」に出演させて頂きました。 ブロネクに出演し

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑