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 機能は、新しい [] [設定] > [AI の新機能] タブで一元管理できるようになりました。重要な考慮事項が一覧表示され、AI 機能の説明が表示されます。また、各機能を個別にオン / オフにすることもできます。

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

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

コンソールの分析情報にワンクリックでアクセス

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

Chrome にログインしている場合は、[設定] > [AI イノベーション] でこれらの機能をオンにすると、使用できるようになります。

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

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

パフォーマンスの分析結果に注釈を付けて共有する

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

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

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

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

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

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

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

過剰なレイアウト シフトを簡単に特定できる

レイアウト シフト トラックのデザインが新しくなりました。レイアウト シフトが、より見やすい紫色のひし形でマークされ、タイムライン上の近接性に基づいてクラスタにグループ化されるようになりました。シフトとそのクラスタの両方について、タイミング、スコア、要素、潜在的な原因が整理された表が [概要] タブに表示されます。

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

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

ライブ指標ビューに「レイアウト シフト」ログを追加する前後の様子。

Chromium の問題: 369100729。

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

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

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

トラック内のアニメーションの前後の名前、合成されていないアニメーションのマーク、失敗理由の表示。

詳しくは、コンポジタのみのプロパティに限定し、レイヤ数を管理するをご覧ください。

Chromium の問題: 41006273。

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

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

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

Chromium の問題: 371463665。

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

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

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

スタック トレースで無視リストを改善する前後の様子。

また、コンソールログを右クリックして [名前を付けて保存] すると、[Show more/less] のテキストは保存されません。

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）。
  • ウェブに関する主な指標のオーバーレイが [レンダリング] タブから削除されました 328487897。
  • 生成 AI 機能で Chrome 設定の同期が不要になりました。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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