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

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

Firefox Developer Edition — Mozilla

https://www.mozilla.org/ja/firefox/developer/

早速DLしてみる

Screen Shot 2014-11-11 at 13.19.28

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

肝心の開発者ツールは?

Screen Shot 2014-11-11 at 13.20.42

インスペクタ

Screen Shot 2014-11-11 at 13.21.11

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

Webコンソール

Screen Shot 2014-11-11 at 13.23.54

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

デバッガ

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

スタイルエディタ

Screen Shot 2014-11-11 at 13.22.39

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

パフォーマンス

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

ネットワーク

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

レスポンシブデザインモード

Screen Shot 2014-11-11 at 13.26.41

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

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

あんまり違わない。

と正直思いました。

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

Firefox OSのアプリ開発に使える

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


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

フォローして続編をチェック

@universionsをフォロー