Safariの開発者メニューでスマートフォン開発

AndroidやiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。

開発者メニューは環境設定の詳細タブから設定が可能

環境設定の詳細タブ

「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。

開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。

ユーザーエージェントの切り替え

iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。

また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになります。

Webインスペクタ

よく利用するのでショートカット「command」+「option」+「i」を覚えておくといいでしょう。

実機やエミュレータ、シミュレータではデバッグがめんどくさいので、SafariとWebインスペクタである程度作りこんでおくと開発効率がぐっとあがります。

関連エントリー

MacのAndroid エミュレータでサイト制作
Android エミュレータでサイト制作
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」
Firebugで始めるCSSデバッグ
IE版のFirebug　IE Developer Toolbar

スポンサードリンク

«新連載「jQuery Mobileデザイン入門 」が開始しました | メイン | CSS Nite LP, Disk 15 終了しました。»