VScode/copilotのChrome DevTools MCP導入方法

編集するファイル

編集するファイルは以下になります。

・C:\Users\自分の名前ディレクトリ\AppData\Roaming\Code\User\mcp.json
・C:\Users\自分の名前ディレクトリ.copilot\mcp.json

導入方法

VScodeを開いて、「ctrl + shift + p」を押してコマンドパレットを開きます。(↓画像赤枠)

「MCP」と入力し、MCPユーザー構成を開くを選択します。

選択後、自動で開いたmcp.jsonファイルの“servers”{}内に下記コードを追記します。(↓画像参照)

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    },

    "chromedevtools/chrome-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url",
        "${input:browser_url}",
        "--headless",
        "${input:headless = false}",
        "--isolated",
        "${input:isolated = false}",
        "--channel",
        "${input:chrome_channel = stable}"
      ],
      "gallery": "https://api.mcp.github.com/2025-09-15/v0/servers/13749964-2447-4c31-bcab-32731cced504",
      "version": "0.0.1-seed"
    }
  }
}

大井追記：全体コード。こちらを記述しないと発火しなかった為。

続いてcopilot側でMCPサーバーが使えるように設定をします。

下記ファイルを編集します。
(自分の名前ディレクトリ下に.copilotディレクトリ以下がない場合は作成。)

C:\Users\自分の名前ディレクトリ.copilot\mcp.json

上記のmcp.jsonに次のコードを追記します。（↓画像参照）

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"],
      "type": "stdio"
    }
  ]
}

その後、copilotチャットの右下のツールの構成を開いて、「MCPサーバー：chrome-devtools」の左のチェックボックスにチェックを入れてcopilotが使用できるサーバーに許可します。

以上の対応でcopilotがChrome DevTools MCPを利用できるようになるはずです。

「copilotのチャットでウェブサイトのURLを渡してDOM情報を取得してください。」

と命令して自動でchromeブラウザが開かれ、VScode内のcopilotチャットにMCPを使用している応答が確認できれば導入完了です。