Web Developerでウェブサイトを構築・デバッグ

杉山貴章(オングス)
2008-07-28 07:00:00
  • このエントリーをはてなブックマークに追加

Web Developer

 Web Developerはウェブサイトの構築をサポートするFirefoxのアドオン。JavaScriptやCSSの無効化、属性やレイアウトなど各種情報の表示、CSSやHTMLの編集、構文のチェックなど、ウェブページを製作する際に活用できる様々な機能を提供してくれる。既に使ってらっしゃる方も多いだろう。

 Web DeveloperはChris Pederick氏が開発したものだが、ミナトラボによって日本語ローカライズ版が公開されている

 Web Developerをインストールすると、図1のようにナビゲーションツールバーの下にWeb Developer用のツールバーが追加される。ここからWeb Developerの各種機能を利用できる。

図1 Web Developerのツールバー 図1 Web Developerのツールバー

 具体的にどのような機能が用意されているのかは、ミナトラボのウェブサイトにおいて全機能の一覧が掲載されているので、そちらを参照していただきたい。Firefox 3を使う開発者のための本連載では、そのうちの主な機能を2回に分けて紹介したいと思う。

各種設定の無効化

 Web Developerではウェブページの設定の一部をツールバーから簡単に無効化することができる。

 ツールバーには[無効化]メニューがあり、ここからJavaやJavaScript、キャッシュ、リダイレクト、色表示、リファラーの送信などを無効化できる(図2)。

図2 [無効化]メニューから様々な設定を無効化できる 図2 [無効化]メニューから様々な設定を無効化できる

 その他にもCookieやCSSの適用、画像表示を、それぞれのメニューから無効化できる。

 この機能を利用すれば、JavaScriptやCSSなどが無効になっているブラウザでの表示を確認したり、Cookieやリファラーを利用するサイトでそれが無効な場合にどうなるのかを、容易に確認することが可能だ。

図3 builderのサイトをCSSを無効化して表示した例 図3 builderのサイトをCSSを無効化して表示した例

 そのほか、画像に関しては背景画像を非表示にしたり、レイアウトを保持したまま画像を非表示にするといったことも可能。またフォームのautocomplete属性やdiabled属性、readonly属性などを無効化することもできる。これらの無効化機能は、様々な環境に対応したデバッグを容易にしてくれるだろう。

様々な情報の表示

 HTMLの各種要素や属性の情報を、ソースコードを参照しなくても画面上で見られたら便利だ。Web Developerではツールバーのメニュー上で表示したい情報にチェックを入れておけば、その情報を画面上に表示してくれる。

 表示できるのはdiv要素の順序やid属性、class属性などの値、リンクやアンカーなど。table要素の入れ子の深さの表示は、シンプルだが便利な機能だ。

図4 div要素の順序を表示した例 図4 div要素の順序を表示した例

 画像関連では幅や高さ、alt属性、ファイルサイズ、パスなどを表示可能。逆にそれらの値が設定されていない画像を枠で囲んだり、問題のある画像を見つけたりといった機能もある(図5)。

図5 画像の情報を表示した例 図5 画像の情報を表示した例

 そのほか、表示されているページに含まれるリンクやアンカー、見出し、meta要素を別のタブで一覧表示することも可能。同様にHTTPレスポンスヘッダーも参照できる。これらの機能は自身で作成したサイトのデバッグだけでなく、参考にしたいサイトの分析などにも利用できるだろう。

 次回は引き続きWeb Developerで提供される機能を紹介したい。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]