DevTools の新機能（Chrome 126）

Sofia Emelianova
Sofia Emelianova
GitHub

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

このバージョンでは、[パフォーマンス] パネルにいくつかの改善が加えられています。

更新されたトラック構成モードでトラックを移動して非表示にする

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

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

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

Chromium の問題: 336266699。

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

[メイン] トラックのフレーム チャートに無視リストのサポートが追加されました。グラフ内のスクリプトを右クリックして、[スクリプトを無視リストに追加] を選択できるようになりました。

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

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

Chromium の問題: 336266714。

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

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

[キャプチャ設定] に [20 倍のスローダウン] オプションを追加する前後の様子。

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 警告ダイアログ。

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

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 の新機能シリーズで取り上げたすべての内容のリスト。