こんにちは。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]
通常のクリック、mousemove、mousedown などのイベントに加えて、「wheel」がイベント リスナー ブレークポイントとして提供されるようになりました。[crbug.com/347562]
以上です。ご一読いただきありがとうございました。