Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化

Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化

更新日:2026年1月3日

Chrome 143で追加されたDevToolsの新機能について調査・考察してみました。MCPサーバーの機能強化、トレース共有の改善、CSS新機能対応など、開発者にとって実用的なアップデートが多数含まれています。参考になれば幸いです。
Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化

1. DevTools MCPサーバーの進化

Chrome 143では、DevTools MCPサーバーがv0.11.0にアップデートされ、AI開発ツールとの連携が大幅に強化された。MCP(Model Context Protocol)は、AIエージェントが外部ツールと対話するための標準プロトコルであり、Gemini CLI、Cursorなどのクライアントから利用可能である。

MCPとは
Model Context Protocolの略称。LLMが外部サービスやツールと連携するための標準化されたプロトコルであり、AIエージェントによるブラウザ操作の自動化を可能にする。

今回のアップデートで追加された主要機能は以下の通りである。ElementsパネルとNetworkパネルで選択した要素やリクエストをAIプロンプト内で参照可能となった。list_console_messagesツールがIssuesパネルの問題も含むようになり、デバッグ情報の取得範囲が拡大した。新規追加されたpress_keyツールにより、フォーム要素以外のキーボードイベントのデバッグが可能となった。

さらに、アクセシビリティツリーのスナップショットをディスクに保存する機能、キャッシュを無視したページリロード機能、既存のChromeプロファイルを使用するための--user-data-dirフラグ設定機能が追加された。これらの機能により、AIを活用したブラウザテストの自動化がより実用的なものとなっている。

2. パフォーマンストレース共有機能の改善

Performanceパネルにおけるトレース共有ダイアログが改善され、エクスポートファイルに追加データを含めることが可能となった。この機能により、デバッグ作業の効率化と情報共有の質が向上している。

エクスポート可能な追加データ
Resource content:HTML、CSS、JavaScriptファイルのコピー(拡張機能スクリプトを除く)
Script source maps:オーサリングコードへのマッピング情報。元の関数名やソースファイルの確認が可能
トレース共有における考慮事項
項目 共有推奨 注意が必要
リソースコンテンツ 公開サイトのデバッグ 機密コードを含む場合
ソースマップ チーム内共有 プロプライエタリコード

この機能はMicrosoftとの協力により実現されたものである。共有すべき情報とプライベートに保つべき情報についてはGoogleの公式ドキュメントで詳細が説明されている。

3. CSS新機能とその他のアップデート

Elementsパネルに@starting-styleルールのデバッグサポートが追加された。この機能はエントリーアニメーションの作成に不可欠なCSS機能であり、要素ツリーにstarting-styleアドーナーが表示され、クリックでトグル可能となっている。Stylesタブでは@starting-styleブロックの検査と編集が可能である。

@starting-styleとは
CSS Transitions Level 2で定義された機能。要素がDOMに追加された際の初期スタイルを指定し、表示時のアニメーション効果を実現する。従来のtransitionでは困難だったエントリーアニメーションを容易に実装可能。

CSS Masonry layoutを実験的に使用している開発者向けに、display: masonryのエディタウィジェットが追加された。flexやgridレイアウトと同様のインターフェースで、各種alignmentオプションを素早くトグルできる。

実践的な活用ポイント

  • Lighthouse 13への更新:DevToolsとLighthouseのパフォーマンスインサイトが統一され、一貫した分析が可能に
  • プレビューチャンネルの活用:Chrome Canary、Dev、Betaを開発用ブラウザとして使用することで、最新機能を先行検証可能
  • フィードバック提供:crbug.comでの機能要望やバグ報告により、DevToolsの改善に貢献可能

今回のChrome 143アップデートは、AI連携の強化とCSS新機能のサポートという二つの軸で開発者体験を向上させるものである。特にMCPサーバーの機能拡充は、AIエージェントを活用した開発ワークフローの可能性を大きく広げるものと評価できる。

参考・免責事項
本記事は2026年1月3日時点の情報に基づいています。専門的な判断は専門家にご相談ください。
参考:Chrome for Developers Blog - What's new in DevTools, Chrome 143