4/4 ウェブ制作に便利なFirefoxアドオン「Web Developer」 [ホームページ作成] All About

エラーの把握と、エラーコンソールへのアクセスに便利

エラーコンソール

Firefoxには、CSSやJavaScriptのエラーを一覧表示する「エラーコンソール」が用意されています。このエラーコンソールは、Firefoxのメニュー「Web開発」→「エラーコンソール」から表示できますが、Web Developerのツールバー上からも簡単に表示できます。

エラーの状況が一目瞭然

Web Developerツールバーの右端にある3つのボタンが、エラーの有無を表しています。右端から順に、

JavaScriptエラーの有無
CSSエラーの有無
描画モード（標準準拠／互換）

の状態を表しています。×印（赤色）ならエラーがあり、チェック印（緑色）ならエラーはないという意味です。どちらの場合でも、クリックすればエラーコンソールが開きます。

※描画モードのボタンは、クリックすると「エラーコンソール」ではなく「ページ情報」ウインドウが開きます。「×印」でもエラーというわけではなく、ただ「互換モードで描画されている」という意味です。

Web Developerの設定

Web Developerの設定ウインドウは、ツールバー上の「設定」→「設定」で開きます。もしツールバーが表示されていない場合は、Firefoxのメニューから、「オプション」→「Web Developer Toolbar」をクリックしてチェックを入れると表示されます。

そのほか、Firefoxのアドオンマネージャーの「拡張機能」画面から、「Web Developer」項目を選択して、そこの「設定」ボタンをクリックすることでも設定できます。

■ウインドウサイズの登録

様々なウインドウサイズを登録

様々なウインドウサイズで表示確認をするために、代表的なウインドウサイズを登録しておくと便利です。ウインドウサイズは、右図のように「サイズ変更」項目で登録できます。

「追加」ボタンをクリックし、切替時に分かりやすい名称と、幅と高さをピクセル値で指定します。

※ソース表示アプリケーションの登録は使えない

ソース表示ソフトの登録はできるが使用はできない

「Web Developer」のツールバー上には「ソース」という項目があります。ページのソースだけでなく、特定のフレームのソースも直接表示できて便利です。

ここに、「ソースを表示するアプリケーションを登録する」という項目があり、クリックするとテキストエディタなどの外部ツールを登録できるようになっています。

しかし、この機能は現在の最新版（Ver 1.1.9）では使えません。登録はできますが、登録してもソースは表示されませんので注意して下さい。今後のバージョンアップで解決されるかも知れません。