MB-Support

パソコン初心者のサポートページ

Mozilla Firefox 11.0 Beta:ページインスペクタの 3D ビュー


普段は開発段階のFirefox(ファイヤーフォックス)をインストールしませんが、Firefoxはベータ版と正式版を同時にインストールできる利点がありますが、同時に利用する事はできません。今回、Mozilla Japan ブログを参照して、WEB開発者向けの主な新機能として、Web ページ内の各要素とその上下関係を立体的に表せる、新しいページ構造視覚化ツール「ページインスペクタの 3D ビュー」を試すべく、Mozilla Firefox 11.0 Betaをインストールしてみました。



追加された機能は、「Firefox」ボタン → 「Web開発」→「調査」をクリックします。



この機能は正式版でも利用できますが、「HTML」「ABPで隠す」「スタイル」のみでした。ベータ版には、「3D」ボタン搭載されています。このボタンをクリックすると、表示しているWEBサイトの各要素が3D化されます。マウスのドラック&ドロップでWEBサイトを回転させたり、スクロールボタンで奥行きを変更でき、キーボードの十字キーでも操作できます。



もちろん、従来通りスタイルシートやHTMLソースを表示して、WEBサイトを分析する事もできますが、要素の上下関係が一目瞭然になる3D機能には驚きました。



右は当サイトの掲示板を斜め下から参照したスクリーンショットです。レコみたいでカッコイイのですが、これが開発に便利なのかは正直なところ微妙です。「調査」の機能は、CSSとHTMLだけでも既に便利な機能として確立しています。実際に操作しているビデオは以下。



新しい開発ツールとアドオン同期機能を追加した Firefox の最新ベータ版をテスト用に公開しました | Mozilla Japan ブログ

New Developer Tools in Firefox 11 Aurora