Chrome 132 の DevTools の新機能

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

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

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

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

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

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

AI チャットの履歴

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

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

[Application] > [Storage] で拡張機能のストレージを管理する

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

Chromium の問題: crbug.com/40963428。

パフォーマンスの改善

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

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

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

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

Chromium の問題: crbug.com/369097528。

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

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

scheduler.postTask イベントとそのイニシエータ矢印のサポート

[パフォーマンス] > [メイン] トラックに、scheduler.postTask() イベントと、それらの間のイニシエータ矢印が表示されるようになりました。

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

Chromium の問題: crbug.com/40775984。

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

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

[要素] > [スタイル] から [アニメーション] に移動

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

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

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

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

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

Chromium の問題: crbug.com/362277525。

メモリパネルでソース別にグループ化された同じ名前の 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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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