本日発表！Web開発が捗る「Firefox Developer Edition」とはなんだ！

こんにちは、ナガタです。
10月11日（現地時間）、Mozilla「Firefox」が10周年を記念した特別エディション「Firefox Developer Edition」を発表しました

黒いです。なんだか開発者仕様って感じですね。（もちろん見た目はカスマイズ可）
それ以外はぱっと見は普通のブラウザです。

HTMLソースや、そのクラスや属性にかかっているCSSを確認できます。

スクリプトの実行結果やログを見たり、実行をすることができます。

スクリプトの内容にブレークポイント（実行されるとストップさせるポイント）などを設置したり、そのときの変数の中身を確認することができます。

CSSを見ることができます。@mediaルールで幅に応じたCSSルール記述部分にジャンプできるのは便利ですね。現在かかってるルールについてはハイライト表示されています。

ネットワークの状態、入力イベント、CSS、グラフィックなどのパフォーマンスを可視化できます。

ファイル（CSSやHTML、画像ファイル、スクリプトなど）の読み込みを可視化し、要求ヘッダ、応答ヘッダ等を確認できます。

表示幅を固定し、開発者ツールを使うことができます。スクリーンショットとかも簡単に撮れます。

GoogleChromeのDeveloperツールとなにが違う？

と正直思いました。

ただし、レスポンシブに対する対応のよさは若干あるかもしれません。CSSの@media移動がすぐできたり、レスポンシブデザインモードでブラウザのウィンドウ幅を変えずに自由に操作できます。

Firefox OS自体あまり詳しくないですが、WebIDE（統合開発環境）がついており、開発・検証・デバッグができるようです。ChromeやFirefox OSシミュレーターなどのデバイス環境でもチェックできる模様。

いかがでしたでしょうか？発表があったのでざっとひと通り使ってみましたが、「今度から使おう！」というメリットはあまり感じませんでした。もう少し使い込めば、すごい機能があったり、効率化につながるのかもしれません。
なにか続報があればまたお知らせしたいと思います！

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。