みなさん、こんにちは。DevTools ダイジェストの前回は、強力な非同期呼び出しスタックなどについてお伝えしました。今回のリリースでは、ネットワーク パネルのフィルタリング（自動入力付き）の改善、Shadow DOM コンテンツの編集機能、CodeMirror 4 の更新などが導入されます。
ネットワーク パネルのフィルタリング
リソースを「ドメイン」などの特定のフィールドでフィルタできるようになりました。フィルタの形式の例は Domain:website.com です。フィルタリングに加えて、有効なフィルタ値の候補が自動入力されます。候補は、クエリの入力に応じてリアルタイムで更新されます。これは、特定のドメインで提供されるすべてのリソースを見つける必要がある場合に便利です。[crbubg.com/258421]
Shadow DOM コンテンツを編集する
DevTools ではこれまで、[要素] パネルで通常の HTML を編集できましたが、この機能が Shadow DOM の一部である要素にも拡張されました。[crbug.com/348991]
CodeMirror 4.0 へのアップグレード
ソースパネルの一部として使用されている JavaScript ベースのテキスト エディタである CodeMirror がバージョン 4 にアップグレードされました。これにより、多くの新機能が追加されました。crbug.com/356878]
CSS プロパティのクイック検索
スタイルペインの新しい検索ボックスで、プロパティ名、値、ルール セレクタを検索できるようになりました。クエリを入力すると、結果がリアルタイムでハイライト表示されます。[crbug.com/278852]
コンソール メッセージの横にあるタイムスタンプ
メッセージを連続してログに記録する場合は、メッセージがログに記録された正確な時刻を確認すると役に立ちます。これは DevTools のテスト機能で有効にできます。[crbug.com/131714]
ヒープ スナップショットのメモリ統計情報の分類
記録されたヒープ スナップショットを表示すると、統計情報の円グラフが表示されます。このグラフには、JavaScript のどの部分が最も多くのメモリを消費しているかが、色分けされて視覚的に示されます。現在は試験運用版の機能です。[ヒープ スナップショットの統計情報] を有効にして試すことができます。[crbug.com/346335]
ラップされたバージョンではなく、console.log の元のソースを表示する
console.log ラッパー関数があるはずですが、残念ながら、コンソールに表示されるメッセージはすべて util.js:46 などのものです。これで、DevTools で元の位置を解決できるようになります。コンソール ログ メッセージをラップするファイルを [特定の名前のソースのステップスルーをスキップ] 入力ボックスに入力すると、DevTools によってブラックボックス化され、ログステートメントの実際のソースが表示されます。[crbug.com/231007]
その他の小さいながらも強力な機能
JavaScript イベント リスナーを動的に追加または削除した後、[要素] パネルの [イベント リスナー] ペインを更新します。[crbug.com/341044]
Ctrl+を使用してコンソール入力にフォーカスを合わせることができます。これは、DevTools のキーボードのみのワークフローに役立ちます。[crbug.com/144943]値（dotted、dashed、double、groove）の border-style の自動入力候補が、仕様に一致するように更新されました。[crbug.com/349998]
[設定] パネルに [デフォルトに戻して再読み込み] ボタンが追加されました。このボタンは、その名の通り、[crbug.com/135451]
現在は試験運用版の機能ですが、[左側に固定] を試して、ワークフローに適しているかどうかを確認できます。他のレイアウト モードは、メイン ウィンドウ（右または下）へのドッキングと、別ウィンドウへの固定解除です。[crbug.com/134282]
通常の click、mousemove、mousedown などのイベントに加えて、「wheel」がイベント リスナー ブレークポイントとして提供されるようになりました。[crbug.com/347562]
以上です。ご一読いただきありがとうございました。