DevTools の新機能（Chrome 131）

Gemini で CSS をデバッグする

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

今すぐお試しください。[要素] パネルで要素を右クリックし、[AI に質問] を選択するか、要素の横にある対応する ボタンをクリックします。DevTools で新しい [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 からお送りください。

過度のレイアウト シフトを簡単に見つけられる

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

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

Chromium の問題: 369100729。

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

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

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

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

Chromium の問題: 41006273。

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

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

Chromium の問題: 371463665。

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

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

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

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

Chromium の問題: 40279542、40945570、345248263。

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

[要素] > [スタイル] タブで、次のことが可能になりました。

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

Chromium の問題: 40280717、40706051、40501131。

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

Lighthouse で、期間モードとスナップショット モードで 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 の新機能、アップデート、その他のトピックについて話し合います。

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

DevTools の新機能

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