DevTools の新機能（Chrome 107）

Jecelyn Yeen

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

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

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

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

Chromium の問題: 1335274、174309

キーボードショートカットによるライトモード / ダークモードの切り替え

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

キーボードショートカットによるライトモード / ダークモードの切り替え。

Chromium の問題: 1280398、1226363

メモリインスペクタでの C/C++ オブジェクトのハイライト表示

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

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

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

メモリインスペクタで C/C++ オブジェクトをハイライト表示します。

Chromium の問題: 1336568

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

HAR のインポートで、イニシエータの完全な情報が利用できるようになりました。以前は、[ネットワーク] パネルに表示されるのは、インポート時のイニシエータ情報の一部のみでした。

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

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

Chromium の問題: 1343185

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

入力逐次検索の設定を無効にすると、Enter キーを押した後に常に DOM 検索が開始されるようになります。

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

ユーザー、特に長い検索クエリを常に使用するテスターにとって、この動作は理想的ではありません。長い検索クエリ（//div[@id="example"] など）を入力すると、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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

フィードバックや機能リクエストは、crbug.com からお送りください。
DevTools のその他 > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告してください。
@ChromeDevTools をメンションしてツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。