safari4、ベータ版の時から重宝している「開発メニュー」。
これを使えば、HTMLやCSSコーディングのデバッグがとても簡単になります。firefoxのエクステンションでもよく似たものはあると思うのですが、あえて紹介してみたいと思います。

まず、この「開発メニュー」。通常通りアップデートしても表示されません。メニューバーの「safari>環境設定>詳細」の、一番下の「メニューバーに”開発”メニューを表示」にチェックで、やっと表示されることになります。


一度チェックを入れれば、「開発」メニューが、メニューバーの「ブックマーク」と「ウィンドウ」の間に表示されます。


まず、このユーザーエージェント（UA）の変更がとても便利です。バーチャルなので完全信用しているわけではありませんが、「その他..」でdocomoなどの携帯電話UAを設定すると、携帯サイトも閲覧可能です。iphoneとipod toutchがすでに入っているのも素敵。

これでざっくりと確認していけば、カラム落ちも、携帯サイトのデバッグも、iphoneサイトの作成も、簡単に行えます。


表示ページ内で右クリックして「要素の内容を表示」でブロックごとの表示や対応CSSの関係がすぐに見えます。


HTMLソースを選択することで、ブルーでブロック要素が囲まれるので、どの部分に対応しているのかわかりやすい。


HTMLタグの属性をダブルクリックすると、たとえばCSSのクラス名がそのまま選択できます。コピーして利用したりも簡単ですね。


このウィンドウは別のウィンドウで表示することも可能です。
この画像では「リソース」を表示させています。ページの中で関連しているCSSファイルや、画像ファイル、JSファイルなどのすべてのファイルを閲覧できます。
画像を選択した場合は、画像の大きさもここで確認でき、ドラッグ＆ドロップで画像をDLすることも可能。

是非「開発」メニューを利用して、作業の短縮化をはかってみてはいかがでしょうか。




本家サイト：

safari４ダウンロード
http://www.apple.com/jp/safari/

safari150の機能-こちらにappleからのプレゼンテーションページがあります。
http://www.apple.com/jp/safari/features.html