最近、Chrome DevTools に多くの機能が更新されました。一部は小さな変更ですが、一部は大きな変更です。まず、要素パネルの更新について説明します。次に、コンソールやタイムラインなどについて説明します。
無効なスタイルルールがコメントアウトとしてコピーされる
[スタイル] ペインで CSS ルール全体をコピーすると、オフにしたスタイルもコピーされるようになりました。オフにしたスタイルは、コメントアウトされた状態でクリップボードに保存されます。[crbug.com/316532]
CSS パスとしてコピー
[要素] パネルの DOM ノードのメニュー項目として [CSS パスとしてコピー] が利用可能になりました（[XPath をコピー] メニュー項目と同様）。
CSS セレクタの生成は、スタイルシートや JavaScript に限定されるものではありません。WebDriver テストのローカライズ戦略の代替手段としても使用できます。[crbug.com/277286]
Shadow DOM 要素のスタイルを表示する
シャドウルートの子要素のスタイルを検査できるようになりました。[crbug.com/279390]
コンソールの copy() がオブジェクトで機能する
Command Line 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]
タイムライン オペレーションの概要を円グラフで表示
タイムライン パネルの詳細ペインに、レンダリング費用の原因を視覚的に示す円グラフが表示されるようになりました。これにより、ボトルネックを一目で特定できます。
以前はポップオーバーに表示されていた情報の多くが、独自のペインに移動されています。確認するには、タイムラインの録画を開始してフレームを選択し、円グラフを含む新しい [詳細] ペインに注目します。[フレーム] ビューでは、選択したフレームの平均 FPS（1000ms/frame duration）などの興味深い統計情報が表示されます。[crbug.com/247786]
画像サイズ変更イベントの詳細
タイムライン パネルの画像のサイズ変更イベントとデコード イベントに、要素パネルの DOM ノードへのリンクが追加されました。
[画像の URL] リンクをクリックすると、[リソース] パネルで対応するリソースが表示されます。crbug.com/244159]
GPU フレーム
GPU で発生したフレームが、メインスレッドのフレームの上部に表示されるようになります。crbug.com/305863]
popstate リスナーでブレークする
'popstate' が、[ソース] パネルのサイドバーでイベント リスナーのブレークポイントとして使用できるようになりました。[crbug.com/88112]
ドロワーで利用できるレンダリング設定
引き出しを開くと、いくつかのペインが表示されます。そのうちの 1 つが [レンダリング] パネルです。このパネルを使用して、ペイントの長方形や FPS メーターなどを表示できます。これは、[設定] > [コンソール ドロワーに [レンダリング] ビューを表示] でデフォルトで有効になっています。
データ URL として画像をコピー
リソース パネルの画像アセットのコンテンツを、データ URI（data:image/png;base64,iVBO...）としてコピーできるようになりました。
この機能を試すには、[フレーム] > [リソース] > [画像] で画像リソースを見つけ、画像プレビューを右クリックしてコンテキスト メニューにアクセスし、[画像をデータ URL としてコピー] を選択します。crbug.com/321132]
Data URI のフィルタリング
データ URI がネットワーク タブに表示されないようにフィルタできるようになりました。フィルタ アイコンを選択します。
ネットワーク タイミングのバグを修正しました
画像のダウンロードに 30 万年かかるように見えた場合は、ご不便をおかけして申し訳ございません。ネットワーク リソースのタイミングが正しくなかった問題は修正されました。crbug.com/309570]
ネットワーク レコーディングの動作をより細かく制御できる
ネットワークの記録の動作は若干異なります。まず、記録ボタンはタイムラインや CPU プロファイルと同じように動作します。当然のことながら、DevTools が開いているときにページを再読み込みすると、ネットワーク レコーディングが自動的に開始されます。その後、オフになります。ページの読み込み後にネットワーク アクティビティをキャプチャする場合は、オンにしてください。これにより、遅延が発生したネットワーク リクエストによって結果が歪むことなく、ウォーターフォールを簡単に可視化できます。crbug.com/325878]
拡張機能で DevTools テーマを利用可能に
ユーザー スタイルシートが DevTools 試験運用版（チェックボックス: [カスタム UI テーマを許可]）で利用可能になりました。これにより、Chrome 拡張機能で DevTools にカスタム スタイルを適用できるようになります。例については、DevTools テーマ拡張機能のサンプルをご覧ください。crbug.com/318566]
以上が、今月の DevTools ダイジェストです。まだご覧になっていない方は、11 月版もご覧ください。