DevTools の新機能（Chrome 131）

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini で CSS をデバッグする

Chrome DevTools に、試験運用版の新しい AI アシスタント パネルが追加されました。このパネルでは、Gemini とチャットして CSS のデバッグに役立つ情報を取得できます。

今すぐお試しください。[要素] パネルで要素を右クリックし、[AI に質問] を選択するか、要素の横にある対応する ボタンをクリックします。DevTools で新しい [AI アシスタンス] パネルが開きます。

[AI に質問する] メニュー オプションと対応するボタン。

新しいパネルで、対応する設定をオンにするよう促すメッセージが表示されます。要件を満たしていることを確認し、設定の切り替えボタンをオンにして、[AI アシスタント] パネルに戻ります。選択した要素をコンテキストとして受け取ります。要素に関する質問を入力します。

プロンプトに回答する新しい AI アシスタント パネル。

新しいパネルの最適な使い方については、DevTools の AI アシスタンスでおすすめの 5 つのこととスタイリングのための AI アシスタントをご覧ください。

DevTools チームは皆様からのフィードバックをお待ちしております。crbug.com/364805393 に残しておいて構いません。

専用の設定タブで AI 機能を管理する

すべての AI 機能を 1 か所で管理できるようになりました。新しいの [設定] > [AI イノベーション] タブ。重要な考慮事項をリストアップし、AI 機能について説明し、個別にオン / オフを切り替えることができます。

新しい [AI イノベーション] タブ。

詳しくは、[設定] > [AI イノベーション] をご覧ください。

ワンクリックでコンソールの分析情報を確認

DevTools で AI 機能の設定同期を有効にする必要がなくなりました。以前にリリースされたコンソール インサイトとスタイル設定の AI アシスタントが、ワンクリックで利用できるようになります。

Chrome にログインしている場合は、[設定] > [AI イノベーション] でこれらの機能をオンにしてください。

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

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

パフォーマンスの検出結果にアノテーションを付けて共有する

[パフォーマンス] パネルの左側に、展開可能なサイドバーに新しい [アノテーション] タブが追加されました。これにより、トレースの調査やパフォーマンスの検出結果の共有時に、メモを作成してコラボレーションするプロセスが効率化されます。

矢印でイベントにラベルを付けて接続し、トレース上で時間範囲をハイライト表示できるようになりました。アノテーション付きのトレースを保存、共有、アップロードして [パフォーマンス] パネルに戻すことができます。

左側のサイドバーにある新しい [アノテーション] タブと、アノテーション付きのイベント、範囲、接続。

[パフォーマンス] パネルでパフォーマンス分析情報を確認する

[掲載結果] パネルの左側のサイドバーにある新しい [分析情報] タブで、行動につながるインサイトを確認できるようになりました。インサイトは Lighthouse レポートと、サポート終了が予定されている [パフォーマンス分析情報] パネルから統合されます。

[分析情報] タブでは、ガイド付きの分析を行い、ウェブサイトの速度を低下させる可能性のあるパフォーマンスの問題について、行動につながるインサイトを提案します。分析情報を利用するには、[パフォーマンス] パネルの左側のサイドバーでタブを開き、さまざまなカテゴリを開いて、項目にカーソルを合わせ、クリックします。[パフォーマンス] パネルに、トレース内の対応するイベントがハイライト表示されます。

DevTools チームでは、分析情報の有用性、改善方法、PageSpeed Insights や Lighthouse などの他のツールとの連携に関するフィードバックをお待ちしております。フィードバックは crbug.com/371170842 からお送りください。

過度のレイアウト シフトを簡単に検出する

レイアウト シフト トラックのデザインが新しくなりました。レイアウトのずれは、より目立つ紫色のダイヤモンドでマークされ、タイムライン上の近接度に基づいてクラスタにグループ化されます。シフトとそのクラスタの両方について、[概要] タブに、タイミング、スコア、要素、考えられる原因が整理された表が表示されます。

[レイアウト シフト] トラックの更新前と更新後、[概要] タブを再編成しました。

さらに、ライブ指標ビューでは、[Interactions] タブの横にスコアと要素を含むレイアウト シフトログが表示されます。

ライブ指標ビューに「レイアウトのずれ」ログを追加する前と後。

Chromium の問題: 369100729。

合成されていないアニメーションを見つける

[アニメーション] トラックに、合成されていないアニメーションに関する有用な情報が表示されるようになります。

  • 対応する CSS プロパティ（存在する場合）に従って、アニメーションに名前を付けます。
  • 合成されていないアニメーションは、トラック内で赤い三角形でマークされます。
  • 合成エラーの理由は [概要] タブに表示されます。

トラック内のアニメーションに名前を付け、合成されていないアニメーションにマークを付け、失敗の理由を示す変更前と変更後。

詳細については、コンポジタ専用プロパティのみの使用、およびレイヤー数の管理をご覧ください。

Chromium の問題: 41006273。

ハードウェアの並行処理がセンサーに移動

[ハードウェアの同時実行] 設定が [パフォーマンス] パネルから、より適切な場所である [センサー] パネルに移動しました。

[ハードウェアの同時実行] 設定を [センサー] パネルに移動する前と後。

Chromium の問題: 371463665

匿名スクリプトを無視して、スタック トレース内のコードに集中する

コンソールのスタック トレースでは、無視リストに登録されているファイルから取得されたフレームを適切に検出して無視し、閉じ、（展開されている場合は）グレー表示するようになりました。以前は、展開したトレースの関数名がグレー表示されていませんでした。

また、新しいの [設定] > [無視リスト] > [評価またはコンソールの匿名スクリプト] をオンにして、ソース URL のない匿名スクリプトを無視するように DevTools に設定することもできます。

スタック トレース内の無視リストの改善前と改善後。

また、コンソール ログを右クリックして [名前を付けて保存] を選択しても、[表示を拡大 / 縮小] テキストは保存されません。

Chromium の問題: 40279542、40945570、345248263。

要素 > スタイル: グリッド オーバーレイと CSS 全体のキーワードの sideways-* 書き込みモードのサポート

[要素] > [スタイル] タブで、以下がサポートされるようになりました。

  • ビューポートのグリッド オーバーレイに、書き込みモード sideways-rl と sideways-lr のグリッドが表示されるようになりました。
  • CSS 全体のキーワードを解決します。たとえば、inherit が色の場合、[スタイル] タブの横にカラー選択ツールが表示されます。 CSS 全体のキーワードを解決する前と後。

Chromium の問題: 40280717、40706051、40501131。

タイムスパン モードとスナップショット モードでの HTTP 以外のページの Lighthouse 監査

Lighthouse で、期間モードとスナップショット モードで HTTP 以外のページのレポートを生成できるようになりました。

タイムスパン モードとスナップショット モードで、非 HTTP ページの監査を有効にする前と有効にした後。

ユーザー補助

このバージョンでは、ユーザー補助機能が次のように改善されています。

  • [ソース] > [エディタ] で、開いているファイルのタブを閉じる際に、X ボタンにフォーカスを当てて Enter キーまたは Space キーを押せるようになりました。
  • [パフォーマンス] で、トレースのエントリを選択し、Space キーを押してコンテキスト メニューを開くことができるようになりました。
  • [パフォーマンス] の左側のサイドバーにある [分析情報] タブはキーボードでアクセスでき、タブキーで移動できます。

Chromium の問題: 372411090

その他のハイライト

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

  • スロットリング設定が [パフォーマンス] パネルと [ネットワーク] パネル間で正しく同期されるようになりました（370332090）。
  • [アプリケーション] > [バックグラウンド サービス] > [推測読み込み] > [ルール] に、[ソース] > [エディタ] に似た {} の美しい表示ボタンが追加されました（40279147）。
  • 実際の表現: 予測入力のオプションを選択した後に Tab キーを押すと、テキストがインデントされずに編集フィールドが閉じるようになりました（349939551）。
  • [要素] > [スタイル]: anchor() と anchor-size() で、引数の順序を変更し、anchor-size() の方向を省略できる新しい構文がサポートされました（343516786）。さらに、フォールバック レンダリングを修正しました（365802559）。
  • ネットワーク: GraphQL のプレビューを修正しました（369931288）。
  • パフォーマンス: トレース読み込みと処理の増分進行状況が報告されるようになりました。
  • WebAuthn: signal* メソッドによって変更された認証情報を動的に更新するようになりました（368467199）。
  • WebAssembly: コンソールに警告が表示され、WebAssembly モジュールに複数のデバッグ シンボルを使用できるかどうか、そしてどのデバッグ シンボルが使用されているかが通知されるようになりました（40879198、369515221）。
  • Core Web Vitals オーバーレイが [レンダリング] タブ 328487897 から削除されました。
  • 生成 AI 機能で Chrome 設定の同期が不要になりました。

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

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

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

以下のオプションを使用して、新機能、アップデート、DevTools に関連するその他の内容について話し合います。

DevTools の新機能

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