このページは Cloud Translation API によって翻訳されました。

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 ツリーが複数回ジャンプすることがあります。この動作により、不要な動きが生じます。

[設定] > [設定] に移動し、[入力逐次検索] を無効にします。この変更により、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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。