DevTools の新機能（Chrome 107）

Jecelyn Yeen

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

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

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

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

Chromium の問題: 1335274、174309

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

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

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

Chromium の問題: 1280398、1226363

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

Memory Inspector は、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 がアイコンとともに表示されます。

flexbox プロパティを揃えます。

Chromium の問題: 1139945

その他のハイライト

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。