Firefox web browser - Faster, more secure & customizable

Mozilla Hacksのブログ記事「Upcoming changes to the Firefox Developer tools node picker」が、Developer Toolsのノードインスペクタボタンの位置が変更になると伝えた。ノードインスペクタはもともと「インスペクタ」コンポーネントの左端に位置していた。アイコンは矢印が四角を指し示すような形をしており、対象のWebページから要素を特定するために頻用されている。新しい場所はツールボックスでの配置となり、場所が真逆の右側になる。馴れるまで注意が必要。

また、インスペクタで要素を選択した場合のユーザインタフェースにも変更が加えられている。従来のバージョンであればインスペクタで要素を指定した場合、その要素がどれであるかわかりやすいように枠線とツールティップがホバー表示されていた。新しいバージョンではマークアップパネルでマウスがホバーしている要素のみがハイライトの対象となるようになった。従来のように一度選択してハイライトが固定されてしまうと、本来チェックしたい部分がホバー表示に隠れてしまって確認できないことがあり、これが扱いにくさのひとつの要因になっていた。

またインスペクタボタンの所属と位置を移動させる今回の変更で、ほかのDeveloper Toolsとの操作においてより互換性が高まるほか、間違ったノードを選択した場合でも従来よりも容易にノード間を移動できるようになる。ブラウザが提供する開発者ツールはWebページの開発には欠かすことのできない機能。特にページが巨大で複雑化してくると、こうしたツールなしに適切なページを制作することは難しくなってくる。

Firefox 26:Developer Tools実行例

Firefox 26:Developer Tools実行例

Firefox 29 Nightly:Developer Tools実行例

Firefox 29 Nightly:Developer Tools実行例