投稿者 モダンなブラウザであれば、持っている開発ツール。Firefox も開発ツールを持っていることはご存知の方も多いと思います。
Firefox のバージョンが上がるたびに、開発ツールにも新機能が導入されていることはご存知でしたか？今回の記事では Firefox 30 で導入された新機能についてご紹介します。
インスペクタ
DOMの状態を確認できるインスペクタですが、2つの新機能が導入されました：
1 つ目は上の画像で示したとおり、選択した要素の幅、高さ、パディング、マージンをレンダリングされたページの上に表示するようになりました。従来は右側のペインで確認していたボックスモデルですが、実際のページの上で確認できるようになり、より直観的になりました。
2 つ目は CSS のルールが上でフォントの上にカーソルをのせると、そのフォントのサンプルがポップアップするようになりました。ちょっとした改良ですが、サイト制作の効率があがります。
Web コンソール
Webコンソールは3点改良されています。
まずコンソールに出力された JS のオブジェクトがシンタックスハイライトされるようになりました。console.log メソッドの引数にオブジェクトを指定すると、そのオブジェクトをコンソールに出力でき、ドリルダウンで構造を確認できますが、その出力がより見やすくなりました。
同様に DOM のノードもハイライトされるようになりました。また、クリックすることで該当する部分をインスペクタで表示するようになっています。
最後の改良は、console オブジェクトへのメソッドの追加です。今回の更新では count メソッドが追加されました。このメソッドは引数に与えられたラベルでの呼び出しの回数を数えます。詳しい使い方とサンプルコードは MDN をご覧ください。
ネットワークモニタ
ネットワークモニタには次の 4 機能が追加されました。
- デザインが一新されました
- 画像に対するリクエストの上にカーソルを移動させると、その画像をポップアップ表示するようになりました
- また画像のサムネイルもリクエストの横に表示されるようになりました
- レスポンスとして JSON ファイルが返ってきた場合は、整形して表示されるようになりました
またこの更新から、ネットワークモニタを Firefox OS アプリに対しても利用できるようになりました。
まとめ
今回は Firefox 30 で導入された開発ツールに対する新機能をご紹介しました。ご紹介した機能は Firefox Aurola でご利用になれます (2014/4/7 現在)。ぜひダウンロードいただいて、新しい機能をいち早く体験してください。
ご紹介した機能の詳細につきましては MDN の開発者ツールページをご覧ください。