はじめに
以下の公式のポストで見かけた、現在、パブリックプレビュー版の「Chrome DevTools MCP」を VS Code で軽く試してみた記事です。
VS Code内では、GitHub Copilot のエージェントモードで軽く試します。
公式情報・リポジトリ
「Chrome DevTools MCP」については、以下の公式の記事やリポジトリがあります。
●Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
https://developer.chrome.com/blog/chrome-devtools-mcp
●ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents
https://github.com/ChromeDevTools/chrome-devtools-mcp/
さっそく試す
必要な環境
さっそく試していきます。必要な環境は、上記の GitHubリポジトリに書いてあります。
各環境での MCPサーバーの設定方法
VS Code の場合は、以下の内容が書かれています。
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
直接 JSON を編集
自分は上記のコマンドを使うやり方ではなく、直接 JSON を編集するやり方で試してみました。
上記は設定を書いた後に、その場で MCPサーバーの起動も行った状態です。
GitHub Copilot のエージェントモードで試す
次に GitHub Copilot のエージェントモードで試します。
用いるプロンプト
試す内容は、公式のリポジトリで「Your first prompt」の部分に書かれている以下です。
Check the performance of https://developers.chrome.com
GitHub Copilot のエージェントモードでの実行結果
GitHub Copilot のエージェントモードで実行した結果を見ていきます。
まず処理の実行直後に、以下のように「Chrome DevTools MCP」を使った処理の利用許可を求める表示が出ました。無事に MCPサーバーが設定され、それを使えているようです。
上記を許可すると、ブラウザが開いて指定したページが開かれ、その後には VS Code の側でパフォーマンス測定の結果が出てきました。
とりあえずのお試しを無事に成功させられました！
【追記】
その後、GitHub の MCP Registry に登録されたという話もあるようです。