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 イノベーション] タブ。

詳しくは、[設定] > [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 が色の場合、[スタイル] タブの横にカラー選択ツールが表示されます。 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 の新機能シリーズで取り上げられたすべての内容のリスト。