DevTools の新機能（Chrome 141）

Sofia Emelianova
Sofia Emelianova
GitHub

AI エージェント用の Chrome DevTools（MCP）

新しい Chrome DevTools Model Context Protocol（MCP）サーバーのプレビュー版をリリースしました。Chrome DevTools の機能を AI コーディング アシスタントに導入します。

以前は、コーディング エージェントは、生成したコードがブラウザで実行されたときに実際に何を行うかを確認できませんでした。Chrome DevTools MCP サーバーはこれを変更します。AI コーディング アシスタントは、Chrome でウェブページを直接デバッグでき、DevTools のデバッグ機能とパフォーマンス分析情報を活用できます。これにより、問題の特定と修正の精度が向上します。

仕組みは次のとおりです。

詳細については、AI エージェント用の Chrome DevTools（MCP）をご覧ください。

Gemini を使用してネットワークの依存関係ツリーをデバッグする

[パフォーマンス] > [分析情報] > [ネットワーク依存関係ツリー] の分析情報に [AI でデバッグ] ボタンが追加されました。このボタンをクリックすると、[AI アシスタント] パネルに移動し、Gemini のサポートを受けながらツリーについて話し合ったり、デバッグしたりできます。

[ネットワーク依存関係ツリー] の分析情報に [AI でデバッグ] ボタンを追加する前後の状態。

Gemini とのチャットをエクスポートする

Gemini との現在のチャットをエクスポートしたり、その回答をクリップボードにコピーしたりできるようになりました。チャットの上部のアクション バーにある [会話をエクスポート] ボタンをクリックするか、チャットの Gemini のメッセージの下にある [回答をコピー] をクリックします。

AI アシスタンスにエクスポート ボタンとコピーボタンを追加する前後の画像。

パフォーマンス パネルでトラック構成が保持される

[パフォーマンス] パネルで記録されたトラックを構成すると、DevTools は構成を保存し、構成をインポートし直すか、新しい構成を記録するときに適用するようになりました。

IP 保護されたネットワーク リクエストをフィルタする

[ネットワーク] パネルで、IP 保護プロキシに送信されたリクエストをフィルタできるようになりました。

[ネットワーク] パネルに [IP Protected requests] フィルタを追加する前後の状態。

要素 > レイアウト タブに Masonry レイアウトのサポートを追加

[要素] > [スタイル] タブで、Masonry レイアウトを検査できるようになりました。

Masonry レイアウトは、1 つの軸（通常は列）で厳密なグリッド レイアウトを使用し、もう 1 つの軸で Masonry レイアウトを使用するレイアウト方法です。

Elements - Layout に Masonry レイアウトのサポートを追加する前後の様子。

Lighthouse 12.8.2

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

このバージョンでは、CSS カスタム プロパティに関する問題が個別のエラー メッセージに分離されています。

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

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

Chromium の問題: 40543651。

その他のハイライト

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

  • パフォーマンス: アイドル状態のコールバック イベントのリクエストに timeout プロパティが含まれるようになりました（crbug.com/441679219）。
  • ユーザー補助機能。スクリーン リーダーが次の内容を読み上げます。
    • プロモーション対象のコマンド メニュー アイテムの「これは新機能です」（crbug.com/441485154）。
    • コード補完の概要ツールバー（crbug.com/433952045）。
  • ネットワーク: ネットワーク ログの項目を右クリックすると、その項目が選択されます（crbug.com/368510578）。

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

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

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

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

DevTools の新機能

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