原文: CSS source map support, network performance analysis & more – Firefox Developer Tools Episode 29 on on February 11, 2014 by Brian Grinstead and Robert Nyman [Editor]

Firefox 29 が Aurora リリースチャンネルに移行しました。これは本リリース向けに、開発ツールの内部で見られるであろう大きな変化のいくつかを報告するときが来たということです。

ツールの外見の改良

新機能に加えて、私たちは Dark テーマおよび Light テーマのルックアンドフィールを更新しました。Light テーマは全面的に見直され、またどちらのテーマもツールボックス全体でより一貫性のあるデザインであることが特徴的です。テーマはツールボックスの設定で変更可能です。(開発記録)

ネットワークモニタ

ネットワークモニタで、ブラウザがページ上のさまざまなパーツを読み込むためにどれだけの時間がかかったかを表示するようになりました。これはアプリケーションのネットワークパフォーマンスについて、初回実行時とキャッシュ済み状態の両方での測定を支援します。(開発記録)

パフォーマンス分析ツールを開くには、ネットワークパネルでストップウォッチのアイコンをクリックしてください。詳しくは以下のスクリーンキャストか MDN をご覧ください。

画像の要求を Data URI としてコピー可能になりました。画像の要求を右クリックしてコンテキストメニューで項目を選択すると、Data URI をクリックボードにコピーします。(開発記録)

インスペクタ

インスペクタのハイライト機能の動作を、他のツールに即した機能性を提供するように更新しました。(開発記録)

CSS transform プレビューツールチップを、CSS ルールビューに追加しました。CSS transform 上にマウスポインタを載せると、transform を視覚化したツールチップを表示します。Firefox Nightly または Aurora を急いでダウンロードして、CSS transform のサンプルで試してみてください。(開発記録)

CSS ルールビューでは複数の CSS 宣言、例えば background: #ccc; color: red; といったものの一括貼り付けをサポートしました。(開発記録)

ネットワークパネルと同様に、<img> 要素を Data URI としてコピー可能になりました。(開発記録)

スタイルエディタ

スタイルエディタに、CSS ソースマップのサポートを追加しました。(開発記録) また、スタイルエディタで CSS プロパティや値のオートコンプリートを行います。(開発記録)

ソースマップ機能の使用方法に関する詳細情報については、Hacks ブログの近々の投稿を注視していてください。

デバッガ

典型的なコールスタックのリストを、ソースリストの隣に追加しました。(開発記録)

デバッガに新しいボタン ‘enable/disable all breakpoints’ があります。これは通常の使用とデバッグをすばやく切り替えられるように、存在するブレークポイントのアクティブ状態を一斉に切り替えます。(開発記録)

デバッガから DOM ノードのハイライトや調査が可能になりました。変数のリストで DOM ノードにマウスポインタを載せると、ページ上でハイライト表示します。また調査アイコンをクリックすると。ノードをインスペクタタブで調査します。この機能はコンソールの出力でも使用可能です。(開発記録)

整形表示でコメントを保持するようになりました。オープンソースの pretty-fast 整形プリンタを使用していますので、整形がかなり速くなるはずです。もしそうでなければ知らせてください。(開発記録)

コンソール

console.trace を改良しました。コールスタックは、他の出力とともにインラインで表示します。また、デバッガでそれぞれの行にアクセスするためのリンクもあります。(開発記録)

オブジェクトの種類に基づいて付加情報を表示するように、console オブジェクトを改良しました。(開発記録)

コードエディタ

コードエディタはスクラッチパッドやスタイルエディタやデバッガといった、ツールの至る所で見ることができます。今回のリリースでの改善点がいくつかあります:

• コードの折りたたみ。(開発記録)
• コードエディタで Emacs や VIM のキーバインディングを利用可能になりました。これらを有効にするには、about:config を開いて “devtools.editor.keymap” を “vim” または “emacs” に設定して、開発ツールを再起動してください。(開発記録)
• ES6 の構文ハイライトをサポートしました。(開発メモ)

今回のリリースでの開発ツールへの貢献者全員にとても感謝しています (43 人)! Firefox 29 で解決した開発ツール関連のバグすべての一覧はこちらです。

フィードバック、バグ報告、機能の要望、あるいは質問がありますか? いつもどおりに、ここでコメントを投稿するか @FirefoxDevTools でチームに連絡してください。