Chrome 137 の DevTools の新機能

Google I/O 2025 エディション

今年の Google I/O では、Chrome DevTools が大きな存在感を示すことでしょう。ライブ セッションと録画セッションが混在します。

魅力的な新機能については、以下をご覧ください。

• Chrome の新機能、2025 年 5 月 20 日 | 午後 3 時 30 分（太平洋時間）
• Chrome DevTools を活用して CTRL+TAB の使用を減らす
• DevTools でのパフォーマンスのデバッグ

また、2025 年 5 月 20 日午後 4 時 30 分（太平洋時間）に Rachel Andrew の ウェブの最新情報セッションもぜひご覧ください。

最新のハイライトの概要については、最新の動画をご覧ください。

Gemini を使用して CSS の変更をワークスペースに保存する

数回クリックするだけで、Gemini が CSS を変更して修正し、接続されたワークスペース フォルダを使用して、変更をパソコンのソースファイルに保存できるようになりました。

自動ワークスペースは試験運用版の機能です。既存のソースフォルダを接続するか、デモを試すことができます。

ワークスペース フォルダが接続されている状態で、[要素] パネルで [AI に質問] をクリックし、Gemini に CSS の変更を依頼して、[続行] をクリックして変更をライブでテストし、[保存されていない変更] を展開して、[ワークスペースに適用] をクリックし、差分を確認して、[すべて保存] をクリックします。

ワークスペース フォルダを接続して、変更をソースファイルに保存する

ワークスペース フォルダを接続すると、JavaScript、HTML、CSS の変更をパソコンに保存されているソースファイルに自動的（または手動で）保存できるようになりました。

JavaScript での動作は次のとおりです。

Chromium の問題: 404170628。

パフォーマンス分析情報について Gemini に質問する

ボタンをクリックするだけで、Gemini とのチャットを開始して、次のパフォーマンス分析情報を調査し、対応できるようになりました。

• フェーズ別の LCP
• LCP リクエストの検出
• レンダリングをブロックしているリクエスト
• レイアウト シフトの原因
• ドキュメント リクエストのレイテンシ

この機能に関するフィードバックは、crbug.com/371170842 にお寄せください。

Gemini でパフォーマンスの調査結果に注釈を付ける

Gemini にパフォーマンス トレースのイベントに関するアノテーションの生成を依頼できるようになりました。

[メイン] トラックのイベントをダブルクリックし、入力フィールドの横にある [ラベルを生成] をクリックします。Gemini は、スタック トレースとコンテキストに基づいてラベルを提案できます。

Gemini とのチャットにスクリーンショットを追加する

[AI アシスタント] パネルで、photo_camera [スクリーンショットを撮る] ボタンをクリックして、ページのスクリーンショットを撮り、Gemini とのチャットに送信できるようになりました。

スクリーンショットを使用すると、プロンプトに視覚的なコンテキストを追加できます。たとえば、表示されているすべてのボタンの間隔が同じかどうかを確認できます。

[パフォーマンス] パネルの新しい分析情報

このバージョンでは、[パフォーマンス] パネルに 2 つの新しい分析情報（[重複した JavaScript] と [レガシー JavaScript]）が追加されました。

重複する JavaScript

新しい [パフォーマンス] > [分析情報] > [重複した JavaScript] では、ページに存在する場合、バンドル内の重複した大きな JavaScript モジュールのリクエストが [ネットワーク] トラックでハイライト表示されます。

インサイトの [ツリーマップを表示] をクリックして、JavaScript の依存関係を調べることもできます。

従来の JavaScript

新しい [パフォーマンス] > [分析情報] > [以前の JavaScript] では、ページに以前の JavaScript が存在する場合（たとえば、従来のブラウザで新しい JavaScript 機能を使用できるようにするポリフィルや変換など）、[ネットワーク] トラックで以前の JavaScript のリクエストがハイライト表示されます。ただし、その機能の多くは最新ブラウザでは必要ありません。

推測でルールタグがサポートされるようになりました

[アプリケーション] > [投機的読み込み] で、ルールセットの URL ではなくタグが表示されるようになりました（タグが存在する場合）。

Chromium の問題: 393408589。

Lighthouse 12.6.0

[Lighthouse] パネルで Lighthouse 12.6.0 が実行されるようになりました。

このバージョンで最も注目すべき点は、Lighthouse がパフォーマンス分析情報監査に移行することです。Lighthouse レポートの [パフォーマンス] カテゴリで、[分析情報を試す] を利用できるようになりました。

変更点の完全なリストもご覧ください。

DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 40543651。

その他のハイライト

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

• ネットワーク: 既知の形式のサーバー タイミングの解析を追加しました。
• Cmd/Ctrl + クリックで、表の行の選択を解除できるようになりました（Chromium の問題: 409474445）。
• [パフォーマンス] > [分析情報] > [効率的なキャッシュの有効期間を使用する] で、TTL が 30 日以上のリソースが無視されるようになりました。

ユーザー補助

このバージョンでは、アクセシビリティが次のように改善されています。

• パフォーマンス: トレース内のイニシエータの矢印がより見やすくなりました。
• 要素: ショートカット A で全ページのユーザー補助ツリービューを切り替えられるようになりました（Chromium の問題: 40888478）。

• スクリーン リーダーで、次のような情報が読み上げられるようになりました。

  • コードブロックからコピーしたときに「クリップボードにコピーしました」と表示される。
  • AI アシスタンス チャットでワークスペースに変更を適用したときの「ワークスペースに適用中」。
  • [パフォーマンス] > [アノテーション] で AI にラベルの生成を依頼したときに表示される「ラベルを生成中」。
  • AI アシスタントのチャットには、おすすめのプロンプトが表示されます。
  • [パフォーマンス] > [分析情報] で、関連する分析情報の推定節約額を読み上げます。

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

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

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

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

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

DevTools の新機能

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