最近では、小さなものから大きなものまで、数多くの最新機能が Chrome DevTools に組み込まれました。まず、[要素] パネルの最新情報について説明した後、コンソールやタイムラインなどについて説明します。
コメントアウトされたスタイルルールのコピーを無効にしました
[スタイル] ペインで CSS ルール全体をコピーすると、オフにしたスタイルが含まれるようになります。これらのルールはコメントアウトされた状態でクリップボードに保存されます。[crbug.com/316532]
CSS パスとしてコピー
[要素] パネルの DOM ノードのメニュー項目として、[CSS パスとしてコピー] を使用できるようになりました（[XPath をコピー] メニュー項目と同様）。
CSS セレクタの生成は、スタイルシートや JavaScript に限定される必要はなく、WebDriver テストのロケータ戦略の代替手段としても使用できます。[crbug.com/277286]
Shadow DOM 要素のスタイルを表示する
シャドウルートの子要素のスタイルを検査できるようになりました。[crbug.com/279390]
コンソールの copy() がオブジェクトに対して機能する
コマンドライン API の copy() メソッドがオブジェクトに対して機能するようになりました。コンソール パネルで copy({foo:'bar'}) を試してみて、オブジェクトの文字列化およびフォーマットされたバージョンがクリップボードにコピーされることを確認します。[crbug.com/289348]
コンソールの正規表現フィルタ
[コンソール] パネルで正規表現を使用してコンソール メッセージをフィルタリングできるようになりました。crbug.com/318308]
イベント リスナーを簡単に削除する
コンソール パネルで getEventListeners(document).mousewheel[0]; を試して、ドキュメントの最初のマウスホイール イベント リスナーを取得します。次に、$_.remove() を使用して、そのイベント リスナーを削除します（$_ は、最後に評価された式の値）。crbug.com/309524]
CSS の警告の削除
これまで表示されていた「無効な CSS プロパティ値」スタイルの警告は削除されました。現在、ブラウザ ハッキングなど、実際の CSS に対する実装の堅牢性を高めるための取り組みが続けられています。crbug.com/309982]
円グラフに要約されたタイムライン オペレーション
[タイムライン] パネルの [詳細] ペインに円グラフが表示されるようになりました。これにより、レンダリング費用の発生源が視覚的に表示されるため、ボトルネックを一目で特定できます。
以前はポップオーバーで表示されていた情報の多くが、個別のペインに表示されるようになります。表示するには、Timeline 記録を開始してフレームを選択し、円グラフが含まれる新しい [Details] ペインを確認します。フレームビューでは、選択したフレームの平均 FPS（1000ms/frame duration）など、興味深い統計情報が表示されます。[crbug.com/247786]
画像のサイズ変更イベントの詳細
[Timeline] パネルの画像のサイズ変更イベントとデコード イベントに、[要素] パネルの DOM ノードへのリンクが追加されました。
[Image URL] リンクをクリックすると、[リソース] パネル内の対応するリソースが表示されます。crbug.com/244159] をご覧ください。
GPU フレーム
GPU で発生したフレームが上部、メインスレッドのフレームの上に表示されるようになりました。crbug.com/305863]
Popstate リスナーでの中断
「popstate」が [Sources] パネルのサイドバーでイベント リスナー ブレークポイントとして使用できるようになりました。[crbug.com/88112]
ドロワーで利用可能なレンダリング設定
ドロワーを開くと、複数のペインが表示されるようになりました。その 1 つはレンダリング パネルであり、ペイントの長方形や FPS メーターなどが表示されます。これは、[設定] > [コンソール ドロワーに「レンダリング」ビューを表示] でデフォルトで有効になっています。
画像をデータ URL としてコピー
[リソース] パネルの画像アセットで、コンテンツをデータ URI（data:image/png;base64,iVBO...）としてコピーできるようになりました。
この機能を試すには、[フレーム] > [リソース] > [画像] から画像リソースを探し、画像プレビューを右クリックしてコンテキスト メニューにアクセスし、[画像データをデータ URL としてコピー] を選択します。crbug.com/321132]
データ URI フィルタリング
[ネットワーク] タブからデータ URI を除外できるようになりました。フィルタ アイコンを選択します。
ネットワーク タイミングのバグを修正
画像のダウンロードに 30 万年かかるのを目にしたら、申し訳ありません。;）ネットワーク リソースのタイミングが不正確になる問題を修正しました。crbug.com/309570]
ネットワーク記録動作をより詳細に制御
録画ネットワークの動作は少し異なります。まず、録画ボタンはタイムラインや CPU プロファイルと同じように機能します。DevTools が開いているときにページを再読み込みすると、ネットワークの記録が自動的に開始されます。オフになると、ページ読み込み後にネットワーク アクティビティをキャプチャする場合はオンにします。これにより、最新のネットワーク リクエストによって結果に歪みが生じることなく、ウォーターフォールを簡単に可視化できます。crbug.com/325878]
拡張機能を通じて DevTools のテーマを利用できるようになりました
DevTools の [テスト] でユーザー スタイルシートを使用できるようになりました（[カスタムの UI テーマを許可する] チェックボックス）。これにより、Chrome 拡張機能でカスタム スタイルを DevTools に適用できます。例については、DevTools テーマ拡張機能のサンプル（crbug.com/318566）をご覧ください。
今回の DevTools ダイジェストはこれで終わりです。まだ 11 月版をまだご覧になっていない場合は、ぜひご確認ください。