REVIEW(10/12/10)

「Google Chrome」でのWeb開発をサポートする拡張機能「Web Developer」

CSSの一時無効、HTML要素の情報表示をはじめとする多彩な便利機能がひとまとめに

「Web Developer」v0.3.1「Web Developer」v0.3.1

 「Web Developer」は、「Google Chrome」でWebページを制作する際に便利な機能を数多く備えたWeb開発者向けの拡張機能。「Google Chrome」に対応するフリーソフトで、編集部にてWindows Vista上の「Google Chrome」v8.0.552.215で動作を確認した。ライブラリサイト“Google Chrome 拡張機能ギャラリー”からダウンロードできる。

 本拡張機能は、「Firefox」向けのWeb開発用拡張機能として有名な「Web Developer」の作者が、自ら「Google Chrome」向けに移植したもの。Webページの制作に便利な機能がひとまとめになっているので、「Firefox」版を愛用している開発者はもちろん、「Firefox」版を利用したことのないWeb開発者にもぜひお勧めしたい。

 本家の「Firefox」向け「Web Developer」はツールバーになっているが、「Google Chrome」にはツールバーの仕組みが存在しないので、本拡張機能は専用ボタンを押すと現れるポップアップウィンドウから任意の機能を実行またはON/OFFするようになっている。ポップアップウィンドウはタブで用途ごとに整理されており、機能は豊富だが全体の見通しはよい。

 たとえば[CSS]タブでは、外部から読み込んだCSSやWebブラウザー標準のCSSのみを一時的に解除できる。また、[Image]タブでは“alt”属性が設定されていない“img”タグを列挙したり、“img”タグのサイズ指定が間違っている部分を探したりする機能を利用可能。さらに、指定したHTML要素を縁取りする機能を集約した[Outline]タブや、要素のサイズやクラス名を表示する[Information]タブ、ルーラーやカラーピッカーといったツールを収めた[Miscellaneous]タブなども用意されている。

ルーラーやカラーピッカーといったツールを収めた[Miscellaneous]タブルーラーやカラーピッカーといったツールを収めた[Miscellaneous]タブルーラーやカラーピッカーといったツールを収めた[Miscellaneous]タブ

 また、専用ボタンには現在ONにしている機能の数が表示されるので、うっかり不要な機能をONにしたままにする心配も少ない。ONにした機能をまとめてOFFにしたい場合は、[Options]タブにある[Reset Page]ボタンを利用すればよいだろう。

HTML/CSSの構文チェックを行うバリデーション機能HTML/CSSの構文チェックを行うバリデーション機能

 そのほかにも、Webサイトの開発に便利な機能を多数搭載。たとえば、[Resize]タブにある各種メニューを利用すれば、Webブラウザーのサイズを任意の大きさへ変更することが可能。モバイル向けのUIをテストしたい場合や、さまざまな解像度での見栄えをチェックしたい場合に便利。また、Web技術の標準化団体“W3C”のWebサービスを利用してWebページのHTML/CSSの構文チェックを行うバリデーション機能も備える。

【著作権者】
Chris Pederick 氏
【対応OS】
(編集部にてWindows 7で動作確認)
【ソフト種別】
フリーソフト
【バージョン】
0.3.1(10/07/25)

(柳 英俊)