Safariの開発メニュー

safari web開発 ブラウザ

Web開発向けの解析ツールとして、firefoxのアドオンのfirebugは有名だと思います。しかし、最近Safariの隠しメニュー(？)にも、同じようなものがある事を知りました。
ちなみに、Windows版Safariで確認しました。

Webアプリ開発環境としてのSafariを知ってますか？
http://www.atmarkit.co.jp/fjava/column/andoh/andoh40.html


編集→設定→詳細の一番下に選択ボタンがあります。

選択すると、メニューバーの中に開発というものが出現します。
一部、日本語ではありませんでしたが、特に問題ないでしょう。
いくつか便利だなと思った所を紹介します。

ユーザーエージェント

ブラウザがサーバにアクセスする際に、通知するユーザエージェントを変更できます。
これを使うことで、相手にはSafari以外でアクセスしているように見せることができます。
iPod touchのユーザーエージェントに変更して、Yahooにアクセスしました。
メニューのその他を選択して以下のように入力して設定します。

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3


iPhoneのユーザーエージェント

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3



ユーザーエージェントを見て、環境ごとに違う見せ方をしているWebページに対して有効に働きます。

追記：firefoxにも同じようなAdd-onsがあるようです。

User Agent Switcher
https://addons.mozilla.org/ja/firefox/addon/59

ネットワークタイムラインの表示


firebugより、見やすい感じがします。

一時無効機能

一時的に、javascript・CSS・キャッシュ・イメージなどを無効にすることができます。


好みの問題かもしれませんが、デフォルトでこのような機能が使えるのは、便利だと思います。Safariは、次期バージョンのCSS3もほぼすべて対応しています。今後に期待です。