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 の警告を無効にすることをおすすめします。

コンソールの自己 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 の新機能シリーズで取り上げられたすべての内容のリスト。