レビューMozilla が最初の Firefox Developer Edition をリリースしたとき、通常の Firefox リリースと大きな違いはありませんでしたが、最近すべてが変わりました。
11 月初旬にリリースされた Firefox DE 44 には、特に HTML5 および CSS3 アニメーションを使用するユーザー向けに、多数の新機能と改良点が盛り込まれています。
Developer Edition のページ インスペクター ツールにはアニメーション パネルが追加されており、開発者はアニメーションをノードごとに実行し、Web ページ上の各アニメーションを簡単にスクラブ、一時停止、検査することができます。
アニメーションパネルはDOMインスペクターと連携しているため、アニメーションの全体表示と詳細表示を簡単に切り替えることができます。アニメーションパネルには、アニメーションに適用するイージングを調整するための視覚的なキュービックベジェエディタも用意されています。
アニメーション ツールを使用すると、ブラウザーを離れることなく HTML でアニメーションを簡単に作成および編集できますが、最も便利なのは新しいメモリ プロファイリング ツールです。これは開発者だけでなく、メモリ フットプリントの削減に感謝するプロキシ エンド ユーザーにも役立ちます。
メモリツールは、メモリ内のすべてのデータのスナップショットをタブごとに表示し、タイプ別に分類します。確認できるメモリオブジェクトは4種類あります。オブジェクト（クラス名でグループ化されたJavaScriptオブジェクト）、スクリプト、文字列、そして最初の3つに該当しないすべてのものを表す汎用的な「その他」です。
割り当てによってメモリを検査し、アプリが使用しているメモリの過剰なチャンクをすばやく見つけます
メモリを検査する方法は他にもありますが、「アロケーションスタック」と呼ばれる方法でかなりの量のメモリを消費するため、必要なたびにオンにする必要があります。これを有効にすると（メモリパネルの上部にあるチェックボックスを確認してください）、メモリ内の各オブジェクトを作成した実際のコードを簡単に参照できます。
つまり、巨大なオブジェクトをリファクタリングしたい場合、アプリ内のどのコード行がそのオブジェクトを生成したのかを素早く正確に確認できるということです。これは、私がこれまで使った中で最も賢いJavaScriptメモリデバッグツールかもしれません。メモリデバッガーの詳細と、その機能のすべてを説明した素晴らしい動画については、Mozilla Hacksブログをご覧ください。
少し粗削りではありますが、同様に便利なのが新しいWebSocketデバッグAPIです。このAPIを使うと、WebSocketフレームを監視できます。Mozillaは将来的にこれを新しいWebSocket検査パネルにすることを計画していますが、現時点ではFirefox開発ツールのエンジニアが作成した「実験的」なアドオンをインストールする必要があります。
実験的かどうかはさておき、使用中に問題はありませんでした。Developer Editionの他の機能と比べても安定性は劣りません。Firefoxのプレリリース版をベースに構築されているため、Developer Editionは従来のFirefoxよりも安定性が少し劣るかもしれませんが、その分、新機能をより早く利用できるというメリットがあります。例えば、このリリースでは、MozillaのElectrolysisプロジェクト（マルチプロセスFirefox）のサポートがデフォルトで有効になっています。
このリリースでは、CSS3 フィルターを視覚的に作成、並べ替え、編集し、変更をページ上でリアルタイムに表示できる新しい CSS フィルター インスペクターも追加されました。
ページ上のライブフィードバックを使用して CSS フィルターを視覚的に編集する
このバージョンには、2つの新しい計測ツールも追加されています。1つ目は、ページの余白に沿ったピクセル定規のセットです。PhotoshopやGimpのピクセル定規をイメージしてください。2つ目は、より便利な新しい計測ツールです。開発者パネルのツールバーにあるアイコンをクリックし、ページ上の任意の場所をクリックしてドラッグするだけで、ピクセル単位で計測できます。
これは、一度使ってみたら今までどうやってこれなしでやっていたのかと不思議に思うほど、驚くほどシンプルなツールの一つです。開発者にとって最も便利なツールの一つ、つまり「忘れるボタン」に少し似ています。「忘れるボタン」はツールバーにあり、クリックすると過去5分間のキャッシュ、Cookie、閲覧履歴が瞬時に消去されます。
Firefox Developer Edition の問題の 1 つは、詳細なマニュアルが付属していないことです (優れたドキュメントはいくつかありますが、さまざまなツールを使って何ができるかを示す実際の「レシピ」が欠けていることがよくあります)。
その問題に対処し、開発者ツールが役立つ可能性のあるいくつかの方法を紹介するために、Web アニメーション エンジニアの Rachel Nabors は、さまざまなツールの使用方法の例とそれらを使用して構築できるものの例の両方を示すインタラクティブなショーケースである DevTools Challenger の作成に Mozilla の協力を得ました。
1 年前に Firefox Developer Edition がリリースされたとき、一連のプロジェクトが失敗に終わった中で Mozilla が Mozilla Labs を放棄することを決定したこともあり、私は懐疑的でした。
12ヶ月が経過した今、Developer Editionは他では見られない6つの機能を備え、価値あるツールであることが証明されています。さらに素晴らしいことに、開発ペースは今のところ停滞の兆候を見せていません。®
