Mozilla Japan ブログ

Mozilla、Firefox、Thunderbird の最新情報をお伝えします

個別記事アーカイブ

Firefox 30 の開発ツールに導入された新機能

モダンなブラウザであれば、持っている開発ツール。Firefox も開発ツールを持っていることはご存知の方も多いと思います。

Firefox のバージョンが上がるたびに、開発ツールにも新機能が導入されていることはご存知でしたか?今回の記事では Firefox 30 で導入された新機能についてご紹介します。

インスペクタ

DOMの状態を確認できるインスペクタですが、2つの新機能が導入されました:
インスペクタがボックスモデルを可視化している様子です。

1 つ目は上の画像で示したとおり、選択した要素の幅、高さ、パディング、マージンをレンダリングされたページの上に表示するようになりました。従来は右側のペインで確認していたボックスモデルですが、実際のページの上で確認できるようになり、より直観的になりました。

2 つ目は CSS のルールが上でフォントの上にカーソルをのせると、そのフォントのサンプルがポップアップするようになりました。ちょっとした改良ですが、サイト制作の効率があがります。

フォントのサンプルがポップアップしている様子

Web コンソール

Webコンソールは3点改良されています。

まずコンソールに出力された JS のオブジェクトがシンタックスハイライトされるようになりました。console.log メソッドの引数にオブジェクトを指定すると、そのオブジェクトをコンソールに出力でき、ドリルダウンで構造を確認できますが、その出力がより見やすくなりました。

コンソールでのJSオブジェクトのハイライト

同様に DOM のノードもハイライトされるようになりました。また、クリックすることで該当する部分をインスペクタで表示するようになっています。

DOMノードのハイライト

最後の改良は、console オブジェクトへのメソッドの追加です。今回の更新では count メソッドが追加されました。このメソッドは引数に与えられたラベルでの呼び出しの回数を数えます。詳しい使い方とサンプルコードは MDN をご覧ください

ネットワークモニタ

ネットワークモニタには次の 4 機能が追加されました。

  • デザインが一新されました
  • 画像に対するリクエストの上にカーソルを移動させると、その画像をポップアップ表示するようになりました
  • また画像のサムネイルもリクエストの横に表示されるようになりました
  • レスポンスとして JSON ファイルが返ってきた場合は、整形して表示されるようになりました

ネットワークモニタでの画像表示

またこの更新から、ネットワークモニタを Firefox OS アプリに対しても利用できるようになりました。

まとめ

今回は Firefox 30 で導入された開発ツールに対する新機能をご紹介しました。ご紹介した機能は Firefox Aurola でご利用になれます (2014/4/7 現在)。ぜひダウンロードいただいて、新しい機能をいち早く体験してください。

ご紹介した機能の詳細につきましては MDN の開発者ツールページをご覧ください。

前後の記事

前の記事: Firefox Developers Conference 2014 in Kyoto の参加申込を受け付けます
次の記事: Brendan Eich が Mozilla の CEO を辞任