Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化
Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化
更新日:2026年1月3日
1. DevTools MCPサーバーの進化
Chrome 143では、DevTools MCPサーバーがv0.11.0にアップデートされ、AI開発ツールとの連携が大幅に強化された。MCP(Model Context Protocol)は、AIエージェントが外部ツールと対話するための標準プロトコルであり、Gemini CLI、Cursorなどのクライアントから利用可能である。
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ブロックの検査と編集が可能である。
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
他の記事を見る(10件)
- AutoCADリバースエンジニアリング完全ガイド2025|中学生から始める実物からの設計図作成
- 人力発電の可能性を徹底調査|自転車からジム、そして全人類発電まで
- 実務経験者のためのプログラミング良書考察|17年の開発経験から見る技術書選び
- AWS Kiro autonomous agent考察|自律型AIコーディングエージェントの実像
- AIベースの自動テストツール考察2025|コード品質保証の次世代アプローチ
- Cursor vs Windsurf 開発効率比較考察|実際の導入シーンでの使い分け
- Playwright入門考察|Seleniumとの違いと自動待機の優位性
- プログラミングの起源・歴史考察|19世紀から現代AIまでの進化を辿る
- E.F.Codd リレーショナルモデル論文考察|1970年の革命的データベース理論
- Chrome DevTools 143 新機能分析|MCP連携とトレース共有の進化
PR:関連サービス
PR:関連サービス
PR:関連サービス
PR:関連サービス



コメント (0)
まだコメントはありません。