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 の拡張をご覧ください。

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 の新機能シリーズで取り上げられたすべての内容の一覧。