DevTools の新機能(Chrome 126)

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

Chromium の問題: 336266699

フレームチャート内のスクリプトを無視する

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

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

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

Chromium の問題: 336266714

CPU のスロットルを 20 倍にする

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

「20x スロードン」を追加する前と後の[取得設定]に移動します

Chromium の問題: 324978881

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

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

[パフォーマンス分析情報] のサポート終了の警告バナーできます。

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

良い点、悪い点、改善の余地がある点について、ぜひご意見をお寄せください

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

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

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

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

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

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

Chromium の問題: 330967147337012362328210785

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

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

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

Chromium の問題: 337094903

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

[アプリケーション] > [専用ツリー] でストレージ バケットを検査できるようになりました。ストレージ セクション。以前は試験運用版だったこのツリーはデフォルトで有効になっています。

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

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

その他のハイライト

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

  • パフォーマンス: <ph type="x-smartling-placeholder">
      </ph>
    • 遅いキャプチャの設定([高度なペイント インストルメンテーションを有効にする] と [CSS セレクタの統計を有効にする])が、次回の DevTools セッションで自動的にクリアされるようになりました。
    • フレームチャートやデータ変更を拡大しても、[Selector Stats] タブが自動的に下部にスクロールしなくなりました(337999939)。
  • コンソール: Ctrl+Ctrlショートカットにより、フォーカスがある場合にのみドロワーのコンソールが閉じるようになりました(40875466328210785)。
  • 自動入力: 住所の解析を修正しました(335409093335409707)。
  • ユーザー補助: ローカライズされた文字列のスクリーン リーダーの通知を修正しました(324930007)。

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

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

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

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

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

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。