こんにちは。DevTools ダイジェストの前回のエディションでは、パワフルな非同期コールスタックやその他のいくつかのコールスタックをご紹介しました。今回は、改善された Network Panel フィルタリング（オートコンプリート機能付き）、Shadow DOM コンテンツの編集機能、CodeMirror 4 の更新などについてご紹介します。
ネットワーク パネルのフィルタリング
[ドメイン] などの特定のフィールドでリソースをフィルタできるようになりました。フィルタ形式は Domain:website.com です。フィルタリングに加えて、有効なフィルタ値に対するオートコンプリートの候補が表示され、クエリの入力に応じてリアルタイムで更新されます。これは、特定のドメインによって提供されるすべてのリソースを見つける必要がある場合に役立ちます。[crbubg.com/258421]
Shadow DOM コンテンツの編集
DevTools は常に [要素] パネルで通常の HTML を編集できましたが、これらの機能が Shadow DOM の要素部分に拡張されました。[crbug.com/348991]
CodeMirror 4.0 にアップグレードする
[Sources] パネルの一部として使用されている JavaScript ベースのテキスト エディタである CodeMirror がバージョン 4 にアップグレードされました。多数の新機能（crbug.com/356878）が追加されています。
CSS プロパティのクイック検索
[スタイル] ペインの新しい検索ボックスから、プロパティ名、値、ルールセレクタを検索できるようになりました。検索キーワードを入力すると、検索結果がリアルタイムでハイライト表示されます。[crbug.com/278852]
コンソール メッセージの横にあるタイムスタンプ
メッセージを連続してログに記録する場合は、メッセージがログに記録された正確な時刻を確認すると役に立つことがあります。これは DevTools の [Experiments] で有効にできます。[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]値（点線、破線、二重、グルーブ）に対する枠線スタイルのオートコンプリートの候補が、仕様に合わせて更新されました。[crbug.com/349998]
設定パネルに [初期値に戻して再読み込み] ボタン **が追加され、通常の表示どおり動作できるようになりました。[crbug.com/135451]
現在は試験運用版の機能として、左に固定機能を試すことができます。ワークフローへの適合性を確認できます。その他のレイアウト モードは、メイン ウィンドウへの固定（右または下）と別のウィンドウへの固定解除です。[crbug.com/134282]
「wheel」が通常のクリック、マウス移動、マウスダウンなどのイベントに加えて、イベント リスナー ブレークポイントとして提供されるようになりました。[crbug.com/347562]
以上です。ご覧いただきありがとうございました。