DevTools の新機能（Chrome 142）

Matthias Rohmer

Gemini が提案したコード

[コンソール] パネルと [ソース] パネルで、AI によって生成された先読み候補が表示されるようになりました。

[コンソール] パネルと [ソース] パネルのコード候補機能

この機能を有効にするには、[設定] > [AI イノベーション] に移動し、[コード候補] を切り替えます。

DevTools MCP サーバーの機能強化

v0.2.1 で DevTools MCP サーバーの公開プレビューをリリースして以来、コミュニティからの貢献によりさまざまな改善が行われ、v0.9.0 がリリースされました。

Node.js のサポートが Node.js 20 まで拡張されました。
ネットワークリクエストとコンソールメッセージは、トークンを節約するためにページネーションできます。また、リクエストタイプ（スクリプト、スタイルシート、画像など）とメッセージタイプ（ログ、警告、エラー）に基づいてフィルタできます。
スクリーンショットは、特定のパスにさまざまな形式で出力できます。
構成可能なツールカテゴリを使用すると、公開する機能を整理して、不要なノイズを減らすことができます。
MCP サーバーで使用される Chrome インスタンスに起動引数を渡せるようになりました。

変更とバグの修正の完全なリストについては、GitHub の公開変更ログをご覧ください。DevTools MCP サーバーの詳細については、お知らせのブログ投稿をご覧ください。

AI アシスタントにすばやくアクセス

DevTools に、AI アシスタンスを開くリンクが追加されました。[AI に質問] コンテキストメニュー項目が [AI でデバッグ] に名前変更され、コンテキストに基づいて AI がサポートできる直接的なアクションが追加されました。

DevTools の右上にある新しいボタンを使用すると、DevTools 内のどこからでも AI アシスタントを開くことができます。

DevTools 全体で AI アシスタンスを利用できる新しいエントリポイント

Gemini でパフォーマンストレース全体をデバッグする

[パフォーマンス] パネルでトレースを記録した後、同じ会話内で、特定のコンテキストを事前に選択することなく、トレース全体、関連するパフォーマンス分析情報、フィールドデータについて Gemini とチャットできるようになりました。これにより、パフォーマンスの問題をより包括的に把握してから、詳細を調べることができます。

Gemini の助けを借りて潜在的な問題を特定したら、トレースイベントやパフォーマンス分析情報などのより具体的なコンテキストアイテムをシームレスに選択して、詳細な検査を行い、同じチャットを続行できます。

同様に、[パフォーマンス] > [分析情報] のすべての分析情報を Gemini とチャットで確認できるようになりました。

ドロワーの向きを切り替える

ドロワーを横に移動できるようになりました。これにより、パネルを重ねて表示するのではなく、並べて表示できます。メインのタブバーでパネル名を右クリックし、[ドロワーに移動] を選択して、選択したパネルをドロワーに移動します。

⋮ > [その他のツール] から、追加のパネルをドロワーに追加します。

ドロワーに画面の向きを変更する新しい切り替えボタンを追加

Google Developer Program

Google Developer Program が DevTools に統合され、プロフィール管理への直接リンクと獲得できる新しいバッジが追加されました。

DevTools の設定にある Google デベロッパープロフィールのコントロール

バッジはオプトイン機能です。バッジを有効にするには、[設定] > [設定] > [アカウント] に移動し、[バッジを獲得する] をオンにします。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

[アプリケーション] パネルで、Service Worker、Shared Worker、Dedicated Worker など、すべてのワーカータイプのストレージ検査がサポートされるようになりました。
:target-current が [スタイル] パネルに表示されます。
[ネットワーク] パネルで、新しい Is ad-related ブール値に基づいてリクエストをフィルタできるようになりました。

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

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

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

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

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