投稿者 最新の Firefox の開発ツールに追加された新機能をご紹介します。
ご紹介する新機能は 2014 年 5 月 2 日にリリースされた Firefox Aurora でお使いになれます。
ボックスモデルの編集
インスペクタで要素を選択するとその要素のマージンや幅などが表示されますが、表示されている数値をダブルクリックすることで、ボックスモデルの各値を編集できるようになりました。
ここでの編集した内容は、その場でレンダリング結果に反映されます。
数値を直接入力する以外に、Alt と矢印キーの上下で数値が 0.1 ずつ増減できます。これで位置の微調整もより効率的に行えます。
また Shift キーと矢印キーの上下で、数値を10ずつ増減できます。
Eyedropper
インスペクタに付属のカラーピッカーに Eyedropper がつきました。
これで色を取得するピクセルを、文字通りピクセル単位で指定できるようになりました。
ここでピックした色をクリップボードにコピーできるようにもなっています。この機能は標準では有効となっていませんので、使用するためには設定が必要です。
コンソールの強化
コンソールも強化されました。
まず console.error, console.exception, console.assert の各メソッドを利用することで、スタックトレース付きでログをとれるようになりました。
つぎに %c ディレクティブ付きでログを記述することで、ログにスタイルを適用できるようになりました。
console.log("%c こんにちは、世界！" , "style: limegreen; font-size: 32px");
と記述することで、色がライムグリーンで文字サイズを32pxになったログをコンソールに出力できます。
Copy as cURL
ネットワークモニターでモニターした通信は、さまざまな形でクリップボードにコピーできますが、今回の更新で cURL コマンドの形でコピーできるようにました。
接続先の URL だけでなく、データやヘッダの情報も一緒にコピーされます。
エディタの改善
エディタの改善点は次の4つです。
- 複数行を選択し編集できるようになりました
- 矩形選択できるようになりました
- 選択して行った編集を Undo できるようになりました
- Sublime Text のキーバインディングが使えるようになりました
複数行を選択し、編集している様子は次の GIF アニメをご覧ください。
デバッガの充実
Canvas デバッガーやアドオン用のデバッガーがつきました。
詳しくは以下のブログ（英語）をご覧ください。
より詳しく知るには
新機能には設定が必要なものや、キーバインドを知る必要があるものもあります。より詳しく知るには MDN の開発ツールページをご覧ください。
新しい開発ツールを上手に使って、どんどんステキなアプリやサイトを作ってください！