ウェブ開発者に朗報:Safari 3のイカス機能〜Windows版も

文:Tony Patton(TechRepublic) 翻訳校正:原井彰弘
2008-02-13 09:14:01
  • このエントリーをはてなブックマークに追加

ツール

 Safariは、開発者向けのアドオンやツールではFirefoxには到底かなわない。しかし、ウェブ開発者にはDroseraやWeb Inspectorというツールやオプションが提供されている。

Drosera

 DroseraはSafariで使用できるJavaScriptデバッガだ。WebKitのサイトからダウンロードすることが可能である。DroseraはWebKitのナイトリービルドと共に含まれており、Windows版もMac版もダウンロードできる。使用には、Safari 3 beta以上が必要となる。

 Droseraは同じウィンドウ内で動作し、一般的なデバッグ機能の多くを提供している。たとえば、コードのステップ実行や、ブレークポイント、コマンドコンソール、変数や関数のスタックへのアクセスといった機能もすべて含まれている。

 Droseraのページでは「Windows版は現在入手できない」と述べられているものの、私が2008年2月2日にダウンロードしたナイトリービルドにはDroseraも含まれていた。DroseraがFirebugに対抗できるようになるにはまだ時間が掛かりそうだが、現在でも使用可能ではある。

Web Inspector

 Web Inspectorを利用すると、ウェブページの内部を観察し、DOMの階層やページのリソースを調査することが可能になる。Droseraと同様に、このツールもWebKitのナイトリービルドに含まれている。

 Web Inspectorをインストールすると、マウスを右クリックしたときに表示される「Inspect Element」というコンテキストメニューから利用できるようになる。ページ上で右クリックを行うと、そのページのDOMが表示され、現在選択しているアイテムが強調表示されるといった具合だ。

 強調表示されたアイテムが選択されると、Web Inspectorは自身のウィンドウの中で画面を縦に分割し、そこにページの情報をする。ここで、右側は一覧表示となっており、HTML文書のほかスタイルシートや画像、スクリプトなどのリソースが表示される。一方、ウィンドウの左側には、右側で選択されたアイテムのソースが表示されるようになっている。

 Web Inspectorで興味深いのは、Network選択機能だ。この機能では、現在のページで使用されているリソースの詳細がすべて表示される。ファイルのサイズや読み込みに掛かった時間なども分かるのである。

  • コメント(4件)
#1 しゅんぺい   2008-02-13 14:07:07
テスト対象のブラウザがまた一つ増えてしまう、とネガティブに考えるのは僕だけですか?(^^;
#2 いが   2008-02-13 16:22:51
仕事がWindows環境の私としては、Macがなくても、Safariのテストが出来ると前向きに考えることにしていますw フォントが違うと…といった問題はあるのですが、それでもJavascript周りなど、同じ環境内で確認できるので、何回か助けられました。
#3 kuss   2008-02-25 11:27:40
Appleの日本語サイト(http://www.apple.com/jp/)からダウンロードしたもの(3.0.4 Build:523.15)は日本語へ対応しています(メニュー表示は英語です)
この記事でリンクしているページからダウンロードしたもの(英語版?)は日本語ページを表示すると文字化けします
#4 chihiro.ishizaw   2008-02-25 13:25:05
デザイン性の高いサイトとかだと、デザイナーさんやクリエーターさんはMacを使っていることが多くて、CMSもSafariで使われたりする事が多いいですよね(営業さんとかはWinでIEが多いのですが。)
なのでWindowsでSafariのテストができるのは、うれしいです。
それまではやっぱり開発Tに一台しかないMacで検証みたいな感じだったので。
(動きだけのテストですが。WinSafariだとフォントやマルチバイト文字はもう少しですよね。。?)
そして去年の年末時点の話ですが、個人的にはSafari、IE、FFで比較するとSafariが一番描画早かったかなって感じました。script.aculo.usとか使ってエフェクトを入れた場合、CSSをちゃんとしなくちゃですが、まるで別システムか!?ってくらい見栄えが良くなるのも結構好きでした!
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]