DevTools の新機能（Chrome 107）

Jecelyn Yeen

DevTools でキーボード ショートカットをカスタマイズする

DevTools で、お気に入りのコマンドのキーボード ショートカットをカスタマイズできるようになりました。

[設定] > [ショートカット] に移動し、コマンドにカーソルを合わせて [編集] ボタン（ペンアイコン）をクリックして、キーボード ショートカットをカスタマイズします。コード（マルチキー押下ショートカット）も作成できます。

DevTools でキーボード ショートカットをカスタマイズする。

Chromium の問題: 1335274、174309

キーボード ショートカットでライトモードとダークモードを切り替える

キーボード ショートカットを設定すると、ライトモードとダークモードを簡単に切り替えることができます。デフォルトでは、このアクションはどのキーボード ショートカットにもマッピングされません。

キーボード ショートカットでライトモードとダークモードを切り替える。

Chromium の問題: 1280398、1226363

Memory Inspector で C/C++ オブジェクトをハイライト表示する

メモリ インスペクタでは、C/C++ メモリ オブジェクトのすべてのバイトがハイライト表示されます。

周囲の WebAssembly メモリ内のオブジェクトのバイト数を認識することが課題でした。オブジェクトのサイズを把握し、オブジェクトの先頭からバイト数をカウントする必要があります。

この機能を使用すると、周囲のメモリと区別できます。変更の詳細については、C/C++ デバッグ用にメモリ インスペクタを拡張するをご覧ください。

Memory Inspector で C/C++ オブジェクトをハイライト表示します。

Chromium の問題: 1336568

HAR インポートでイニシエータの完全な情報をサポート

HAR のインポートで、イニシエーターの詳細情報を利用できるようになりました。これまで、[ネットワーク] パネルには、インポート中にイニシエータの一部の情報のみが表示されていました。

イニシエーター情報は、デベロッパーがネットワーク リクエストの起点をトレースし、ネットワーク関連の問題を特定する際に役立ちます。

HAR インポートでイニシエータの完全な情報をサポート。

Chromium の問題: 1343185

Enter を押した後に DOM 検索を開始

[入力逐次検索] 設定を無効にして、Enter キーを押した後に DOM 検索を常に開始できるようになりました。

[要素] パネルで、Ctrl キーまたは Command キーと F キーを押して検索バーを切り替えます。検索テキストボックスにクエリを入力すると、DOM ツリーは一致する最初の要素にジャンプし、デフォルトでハイライト表示されます。

ユーザー、特に長い検索クエリを常に扱うテスターにとって、この動作は理想的ではありません。長い検索クエリ（//div[@id="example"] など）を入力すると、DOM ツリーが複数回ジャンプすることがあります。この動作により、不要な動きが発生します。

DOM 検索。

[設定] > [設定] に移動し、[入力しながら検索] を無効にします。この変更により、Enter キーを押した後にのみ検索が開始されます。

入力逐次検索の設定。

Chromium の問題: 1344526

align-content CSS フレックスボックス プロパティに start アイコンと end アイコンを表示

[スタイル] ペインで、display: flex または display: inline-flex を使用して CSS クラスの align-content プロパティを編集します。start と end は、アイコン付きでオートコンプリート プルダウンに表示されます。

align-content flexbox プロパティ。

Chromium の問題: 1139945

その他のハイライト

  • コンソールのサイドバーに正しいメッセージ数を表示します。以前は、コンソール メッセージを消去してもカウントが更新されませんでした。（1343311）

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。