Chrome 144 では、Chrome DevTools MCP サーバーに待望の機能である新しい [リクエスト条件] パネルが追加され、フォントと採用されたスタイルシートのデバッグが改善されました。
以上が、2025 年にリリースした優れた機能のリストです。見逃した記事がないか確認してみましょう。以下のハイライトを確認するか、DevTools の新機能の過去の版を参照してください。
DevTools MCP サーバーの更新
DevTools MCP サーバーのさまざまな修正を適用し、v0.12.1 をリリースしました。このバージョンでは、既存のブラウザ セッションを再利用できる自動接続という新しい主要機能が導入されています。自動接続を使用すると、Chrome でデバッグを開始し、DevTools MCP を同じ Chrome インスタンスにポイントして、中断したところから再開できます。
DevTools MCP の自動接続の詳細については、関連するブログ投稿をご覧ください。変更点とバグの修正の完全なリストについては、GitHub の公開変更ログをご覧ください。
個々のネットワーク リクエストのスロットリング
[ネットワーク リクエストのブロック] パネルの名前が [リクエスト条件] に変更されました。リクエストのブロックに加えて、このパネルで個々のリクエストをスロットリングできるようになりました。
⋮ > [その他のツール] > [リクエスト条件] からパネルを開きます。[ブロックとスロットリングを有効にする] チェックボックスをオンにして、リクエストのブロックを有効にします。+ ボタンをクリックして、新しいテキスト パターンを追加します。 アイコンをクリックして、すべてのルールを破棄します。
個々のネットワーク リクエストをスロットリングする方法については、更新されたドキュメントをご覧ください。
@font-face ルールと @font-feature-values ルールを編集する
@font-face と @font-feature-values が [スタイル] パネルに表示され、そこから編集できるようになりました。
[要素] パネルの採用されたスタイルシート
[要素] パネルに、シャドウルートとドキュメント ルートの下に採用されたスタイルシートが表示されるようになりました。これにより、構築されたスタイルシートを操作するユーザーは、要素に影響するスタイルシートを見つけやすくなり、スタイルが適用されない場合にデバッグしやすくなります。
DevTools 2025 の新機能
AI イノベーション
コンソール分析情報から始まり、AI のイノベーションは今や Chrome DevTools の不可欠な一部となっています。AI アシスタンス パネルは、コンテキスト認識型の AI アシスタンスによるデバッグのメインハブです。コンソール パネルとソース パネルのコード候補、パフォーマンス トレースの Gemini による自動アノテーションなど、DevTools にはワークフローを効率化するための AI 搭載ツールが包括的に用意されています。
- エンドツーエンドのスタイリング修正: Gemini に CSS の問題を修正するようリクエストし、ワークスペースと組み合わせて、変更内容をディスク上のソースファイルに直接保存します。
- パフォーマンスについて質問する: AI アシスタンスを使用してパフォーマンスの完全なトレースについて話し合ったり、パフォーマンス分析情報を詳しく調べたり、Gemini を使用してトレースにアノテーションを付けたりできるようになりました。
- ビジュアル デバッグ: AI アシスタンス パネルがマルチモーダルになり、画像をアップロードしたり、スクリーンショットを撮ったりして、Gemini がビジュアルの不具合を理解し、デバッグをサポートできるようになりました。
パフォーマンス
パフォーマンスのデバッグをより簡単に行えるように、[パフォーマンス] パネルを再設計しました。たとえば、記録されたトレースには、ボトルネックをより迅速に特定し、トレースをより迅速にナビゲートするのに役立つ厳選された分析情報が含まれるようになりました。その他の改善点は次のとおりです。
- 実用的な分析情報: パフォーマンス分析情報の強力なセットを導入しました。これにより、フェーズ別の LCP、レイアウト シフトの原因、ドキュメント リクエストのレイテンシなどの具体的な問題を特定できます。
- 実際のコンテキスト: フィールド データと CrUX データを [パフォーマンス] パネルに直接統合し、実際のユーザー エクスペリエンスに対してラボの結果を検証できるようにしました。
- フレームワークのコンテキスト: Angular v20 と React v19.2 で 拡張性 API が使用されるようになりました。コンポーネント ツリーを直接確認できるため、メインスレッドのボトルネックを把握しやすくなります。Angular チームと React チームとのパートナーシップに感謝します。
- コラボレーションの改善: トレースにアノテーションを付けたり、リソース コンテンツとソースマップをエクスポートしたりするオプションが追加され、トレースの共有が容易になりました。これにより、同僚や将来の自分が必要なコンテキストをすべて把握できるようになります。
ウェブ プラットフォーム
DevTools は、進化するウェブ プラットフォームに対応し、最新の CSS 仕様専用のツールを追加するとともに、既存の機能のデベロッパー エクスペリエンスを改善しました。
複雑な CSS 変数チェーンのディープ トレース、プロパティ ツールチップへのベースラインの可用性の追加、@starting-style ルールを使用した複雑なエントリ アニメーションのデバッグ サポート、新しい display: masonry レイアウトのビジュアル エディタの導入を行いました。
プレビュー チャネルをダウンロードする
Chrome の Canary、Dev、Beta をデフォルトの開発ブラウザとして使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーがサイトの問題を発見する前に、問題を特定することもできます。
Chrome DevTools チームに問い合わせる
DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。
- フィードバックや機能リクエストは、crbug.com からお送りください。
- DevTools のその他 > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告してください。
- @ChromeDevTools をメンションしてツイートしてください。
- DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。