このページは 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 Flexbox プロパティの `start` アイコンと `end` アイコンを表示

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

Alignment-content Flexbox プロパティを指定します。

Chromium の問題: 1139945

その他のハイライト

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

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

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

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

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

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