DevTools の新機能（Chrome 126）

Sofia Emelianova
Sofia Emelianova
GitHub

パフォーマンス パネルの改善

このバージョンでは、[パフォーマンス] パネルが改善されています。

更新されたトラック設定モードでトラックを移動、非表示にする

トラック名を右クリックして [トラックを設定] を選択すると、トラック設定モードに入ることができます。余分なスペースを必要とする編集ボタンが削除されました。

編集ボタンをメニュー オプションに置き換える前と後。

トラック構成モードでは、トラックの順序を変更したり、トラックを非表示にしたりできます。 上矢印または 下矢印をクリックしてトラックを移動するか、 非表示をクリックします。設定モードを終了するには、下部にある [トラックの設定を終了] をクリックします。この構成は新しいトレースでは保持されますが、次の DevTools セッションでは保持されません。

Chromium の問題: 336266699。

フレームグラフでスクリプトを無視する

[Main] トラックのヒートマップでは、無視リストのサポートが追加されました。グラフ内のスクリプトを右クリックして、[無視リストにスクリプトを追加] を選択できるようになりました。

無視リスト、無視としてマークされたスクリプト、対応するルールを [設定] に追加するためのメニュー オプション。

無視されたスクリプトはグラフで折りたたまれ、[無視リストに登録済み] としてマークされ、の [設定] > [無視リスト] の [カスタム除外ルール] に追加されます。無視されたスクリプトは、トレースまたはカスタム除外ルールから削除されるまで保存されます。

Chromium の問題: 336266714。

CPU を 20 倍スロットリングする

[パフォーマンス] パネルの [キャプチャ設定] にある [CPU スロットリング] メニューに、新しい [20 倍の遅延] オプションが追加されました。これにより、ハイエンド コンピュータでも、実際のパフォーマンスの問題をより正確に再現して分析できるようになりました。

[キャプチャ設定] に [20x スロードン] オプションを追加する前後。

Chromium の問題: 324978881。

パフォーマンス分析情報パネルはサポート終了となります

試験運用版の [パフォーマンス分析情報] パネルは 2024 年にサポートを終了します。DevTools チームは、最も便利な機能を [パフォーマンス] パネルに統合する作業を進めています。[パフォーマンス分析情報] パネルの上部に、サポート終了予定を通知するバナーが表示されるようになりました。

[パフォーマンス分析情報] パネルのサポート終了に関する警告バナー。

詳細については、2024 年以降のパフォーマンス ツールをご覧ください。

機能がうまく機能している点、機能していない点、改善すべき点など、ご意見がございましたら、ぜひお寄せください。

ヘッダー文字列全体を貼り付けてオーバーライドする

ヘッダーをオーバーライドする際に、ヘッダー文字列全体（HEADER_NAME: VALUE）を貼り付けることができるようになりました。そうすると、DevTools は : にある文字列をヘッダー名とその値に分割します。

次の動画で、実際の動作をご覧ください。

ヘッダーの編集時に、英数字、ハイフン、アンダースコア以外の文字を入力すると、[ネットワーク] パネルで警告が表示されるようになりました。

サポートされていない文字を含むヘッダー名の横にある警告

また、chrome://-URL ではオーバーライド メニュー オプションと [編集] ボタンが無効になります。これは想定どおりの動作です。

Chromium の問題: 330967147、337012362、328210785。

ヒープ スナップショットの新しいフィルタで過度のメモリ使用量を検出する

[メモリ] パネルの [ヒープ スナップショット] には、メモリ使用量の非効率的な一般的なケース（重複した文字列、接続解除された DOM ノードで保持されているオブジェクト、DevTools コンソール）を見つけるのに役立つ新しいフィルタがあります。

メモリ使用量が非効率になる一般的なケースのフィルタ オプションを追加する前と後のフィルタ オプション。

Chromium の問題: 337094903。

[アプリケーション] > [ストレージ] でストレージ バケットを調べる

[Application] > [Storage] セクションの専用ツリーでストレージ バケットを確認できるようになりました。このツリーは以前は試験運用版でしたが、デフォルトで有効になりました。

[ストレージ] セクションでストレージ バケットツリーを有効にする前と後。

Chromium の問題: 338094915。

コマンドライン フラグを使用してセルフ XSS 警告を無効にする

Chrome の使用を自動化する場合や、デバッグのためにコマンドラインから DevTools を開く場合は、新しい DevTools セッションごとに表示される自己 XSS 警告を無効にすることをおすすめします。

コンソールの self-xss 警告ダイアログ。

--unsafely-disable-devtools-self-xss-warnings コマンドライン フラグを Chrome に渡すことで、このダイアログを無効にできるようになりました。

Chromium の問題: 41491762。

Lighthouse 12.0.0

[Lighthouse] パネルで Lighthouse 12.0.0 が実行されるようになりました。

今回の更新では、PWA カテゴリの削除、SEO カテゴリの再編成、全体的なコスト削減のサポート終了、新しい監査、監査の変更など、多くの変更が含まれています。変更点の詳細なリストをご覧ください。

DevTools の [Lighthouse] パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

  • パフォーマンス:
    • 低速キャプチャの設定（高度な描画パフォーマンスの計測を有効にすると CSS セレクタの統計情報を有効にする）が、次の DevTools セッションで自動的に消去されるようになりました。
    • フレイムグラフをズームしてデータが変更されたときに、[セレクタの統計情報] タブが自動的に一番下にスクロールしないようにしました（337999939）。
  • コンソール: Ctrl+ショートカットにより、フォーカスがある場合にのみドロワーのコンソールが閉じるようになりました（40875466、328210785）。
  • 自動入力: 住所の解析が修正されました（335409093、335409707）。
  • ユーザー補助: ローカライズされた文字列のスクリーン リーダーの通知を修正しました（324930007）。

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。