普段、Firefoxをメインブラウザとして使っていて、サブブラウザ（？）として、Google Chromeを使っていますが、HTML5のサポートが一番よいのはSafari5ということで、HTML5関連のいろいろな実験するときに、Safari5を使う機会が増えるかと思います。
そこで、活躍するのが WebInspectorです。
Google Chromeにもありますので、馴染みの方も非常に多いと思いますが、Safari5では、WebInspectorを使うには、非常に簡単ですが、ちょっと設定をしなければなりません。そこで、その設定の手順を書かせていただきます。
WebInspector
WebInspectorとは、JavaScriptのデバッグやHTMLパースエラーの解析などを行うためのツールです。FirefoxアドオンのFirebugがありますが、WebInspectorは、Firebugのようなツールと思えば、イメージしやすいかと思います。
また、同名の富士通が開発したアクセシビリティを診断するソフトウェアがありますが、それとは全く別物です。
まずは設定
ここでは、Windows版のSafari5で勧めますので、予めご了承ください。
Safari5を起動したときに、デフォルトなのかどうかは、わかりませんが、メニューバーが表示されていませんので、メニューバーを表示します。そのほうが分かりやすので・・
WebInspectorを使うためには、メニューバーに「開発」というメニューを追加しなければなりません。
追加方法は、はじめに下記の操作を行います。
メニューバー → [表示] → [設定]
設定をクリックすると、下記図のようなウィンドウが立ち上がります。
そして、「詳細」のタブをクリックし、そこに、「メニューバーに"開発"メニューを表示」というチェックボックスがありますので、チェックすれば、メニューバーに「開発」メニューが表示されます。
」
WebInspectorを使ってみる
メニューバーに「開発」メニューが追加されると、WebInspectorが使えるようになります。（他にも方法があれば教えてください。）
WebInspectorの起動は下記の操作になります。
メニューバー → [開発] → [Webインスペクタを表示]
その手順を行わずとも、エラーコンソールを表示でも使うことができます。
最後に
Firefoxのアドオンには、Firebugという素晴らしいアドオン以外にも、ユーザエージェントの切り替えを行うことができる User Agent Switcher、見ているページをOperaを起動させて確認を行うことができる OperaView（Firefox3.6には未対応）がありますが、
Safari5の「開発」メニューの中には、ユーザエージェントの切り替えや別のブラウザを起動させることなどを行うことができます。Firefoxはアドオンとして追加しなければなりませが、Safari5はそういった機能がすでに組み込まれているということです。
個人的な感想ですが、機能、HTML5のサポート、Google Chromeに次いで2位のJSの処理速度などにおいて、今後なにかの開発に関しては、Safari5は大いに役立ちそうです。
僕自身、Safariに、徐々に興味が湧いてきているところですので、僕自身、今後Safariを使い、エクステンションなどを開発したりするなど、Safariに慣れていこうと思います。
コメント