Firefox web browser - Faster, more secure & customizable

Firefox 11ナイトリー版に開発者およびWebデベロッパ向けの機能「Style Editor」が導入されたことが発表された。FirefoxはFirebugのような開発ツールをFirefoxで自前で開発して搭載する取り組みを続けており、今回導入された「Style Editor」はその成果の1つとなる。

「Style Editor」は対象となるページに関係するすべてのCSSファイルを編集するためのエディタ。変更した内容はオンザフライで適用される。CSSの書き換えをオンザフライで適用するというのはほかの開発ツールも持っている機能だが、今回Firefoxに導入された「Style Editor」はすべてのCSSファイルを単一のUIから操作できること、変更内容を保存したりエキスポートしたりできること、エディタにOrionを採用している、といった特徴がある。

Firefoxナイトリー最新版でマイナビニュースを閲覧

メニューから「Style Editor」を選択するかShift-F7でStyle Editorを起動可能

こちらは編集する前の記事のページ

Style Editorを使って主要なスタイルをすべて無効にした場合の表示例

ページインスペクタでも同様にCSSの内容を調査することは可能

ただし、変更内容をそのまま保存したり全体をまとめて閲覧したりといったことはできない

Firefoxオーロラに導入されたページインスペクタを使用すればCSSを調べることはできるが、ファイルとして編集できるようにはなっていない。見逃されがちだが、変更したものを保存できるというのはかなり便利な機能。この機能がないと変更した内容をコピー&ペーストする作業が頻繁に発生することになるが、まとめてコピーできればまとめて入れ替えたり元に戻したりといった作業を簡単に実施することができる。

「Style Editor」の紹介ページでは、まだ開発ブランチにはマージしていないが、すでに「デバッガ」の実装が進められており、そう遠くない段階でFirefoxの開発ブランチにマージすることが紹介されている。これら機能がすべて揃うのはFirefox 11がリリースされてから、またはその次のバージョンあたりになると見られるが、向こう数ヶ月の間に開発ツールが一気に充実することになる。