Chrome 132 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini を使用してネットワーク リクエスト、ソースファイル、パフォーマンス トレースをデバッグする

CSS スタイルに加えて、ネットワーク リクエスト、ソースファイル、パフォーマンス トレースについて Gemini とチャットできるようになりました。

[要素] パネルのコンテキスト メニューと同様に、[AI アシスタント] パネルを開いて Gemini とのチャットを開始するには、右クリックして [AI に質問] を選択するか、次の横にある [AI に質問] ボタンをクリックします。

  • [ネットワーク] パネルのネットワーク リクエスト。
  • [ソース] > [ページ] タブのファイル。
  • [パフォーマンス] > [メイン] トラックのアクティビティ。

[ネットワーク]、[ソース]、[パフォーマンス] の [AI に質問] ボタンとメニュー オプション。

Gemini は、選択したリクエスト、ファイル、アクティビティのコンテキストを考慮します。

DevTools チームは、crbug.com/364805393 で皆様のフィードバックをお待ちしております。

AI とのチャットの履歴

Gemini の過去のチャットを復元して表示できるようになりました。AI アシスタンス パネルの左上にあるアイコン [新しいチャット] をクリックするか、ネットワーク パネルの [AI に質問] ボタンとメニュー オプション、[ソース] > [ページ] タブ、[パフォーマンス] > [メイン] トラックを使用します。

以前のチャットを確認するには、[] 履歴ボタンのプルダウン メニューから、対応するプロンプトを選択します。[AI アシスタント] パネルには、DevTools が開いている間、チャットの履歴が保存されます。

[履歴] ボタンの下にあるプルダウンの AI チャット履歴。

[アプリケーション] > [ストレージ] で拡張機能のストレージを管理する

ローカル ストレージやセッション ストレージと同様に、[アプリケーション] > [ストレージ] セクションで拡張機能ストレージのエントリを表示、変更できるようになりました。

[アプリケーション] パネルに [拡張機能のストレージ] セクションを追加する前と後。

Chromium の問題: crbug.com/40963428。

パフォーマンスの改善

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

ライブ指標のインタラクション フェーズ

パフォーマンスのリアルタイム指標でインタラクションを展開して、フェーズの内訳とタイミングを確認できるようになりました。

フェーズとそのタイミングの分類をインタラクションに追加する前と後。

Web Vitals 拡張機能が DevTools に追加されましたでお知らせしたとおり、これらの機能のリリースをもって、Web Vitals 拡張機能のサポートは終了します。

Chromium の問題: crbug.com/369097528。

[概要] タブのレンダリング ブロック情報

[パフォーマンス] > [ネットワーク] トラックで赤い三角形でマークされたネットワーク リクエストを選択すると、[概要] タブに、（リファクタリングされた）ツールチップに加えて、リクエストがレンダリング ブロックであることを示すメッセージが表示されるようになりました。

[概要] タブにレンダリング ブロック情報を追加する前と後。

scheduler.postTask イベントとその開始矢印のサポート

[パフォーマンス] > [メイン] トラックに、scheduler.postTask() イベントと、次の開始元矢印が表示されるようになりました。

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

scheduler.postTask イベントとその開始矢印のサポートを追加する前と後。

Chromium の問題: crbug.com/40775984。

アニメーション パネルと [要素] > [スタイル] タブの改善

このバージョンでは、[アニメーション] パネルと [要素] > [スタイル] タブが改善されています。

[要素] > [スタイル] タブに、animation プロパティの値の横にアニメーション [アニメーション パネルに移動] ボタンが追加され、アニメーションを簡単に変更できるようになりました。

[スタイル] タブから [アニメーション] パネルへのリンクを追加する前と後。

[計算済み] タブのリアルタイム更新

[要素] > [計算済み] タブで、アニメーションが値を更新したときなどに、計算された値がリアルタイムで更新されるようになりました。

センサーで圧力エミュレーションを計算する

[センサー] パネルで、Nominal、Fair、Serious、Critical の CPU 負荷をエミュレートできるようになりました。

[センサー] パネルに CPU 負荷エミュレーション オプションを追加する前と後。

Chromium の問題: crbug.com/362277525。

同じ名前の JS オブジェクトがソース別にグループ化されている [メモリ] パネル

[メモリ] パネルで、異なるソースから取得された同じ名前の JS オブジェクトを区別し、それぞれをグループ化できるようになりました。

同じ名前の JS オブジェクトをソース別にグループ化した前後。

Chromium の問題: crbug.com/357902505。

設定画面のデザインが新しくなりました

ユーザー インターフェースのデザインをより統一するため、DevTools の設定が Chrome の設定に近づきました。特に、セクションが視覚的に「カード」に分割されるようになりました。

前後のセクションを「カード」に分割します。

[パフォーマンス分析情報] パネルのサポートが終了し、DevTools から削除される

[パフォーマンス分析情報] パネルの重要な機能と便利な機能はすべて、[パフォーマンス] パネルに移動しました。具体的には、リアルタイム指標、分析情報サイドバー タブ、レイアウトの変化トラックに移動しています。そのため、このバージョンでは、DevTools から [パフォーマンス分析情報] パネルが非推奨になり、削除されます。

DevTools チームは、このパネルの非推奨化とパフォーマンス デバッグ機能全体に関するフィードバックをありがとうございました。いつものように、皆様のご意見やご感想をお聞かせください。より詳細にご記入ください。

その他のハイライト

このリリースの主な修正と改善点は次のとおりです。

  • パフォーマンス:
    • 検索クエリの不要な 3 文字という上限を削除しました。
    • ライブ指標画面に戻る ホームボタンを追加しました。
    • 以前は機能しなかった Shift+S/W トレース ズーム ショートカットを修正しました。
  • [要素] > [スタイル]:
    • 予測入力 341991541 に anchor-center を追加しました。
    • 2 つの単語の値で Flexbox エディタを使用できないバグ（341964645）を修正しました。
  • ネットワーク: プリフェッチの失敗が、コンテンツの表示に影響していないことを示すために、赤色のエラーではなく黄色の警告になりました 372055494。

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

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

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

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

DevTools の新機能

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