公式 Chrome DevTools MCP ： Chromeブラウザ用のMCPが登場 これは、Web開発者にとって必須 #githubcopilot

ブラウザの動作検証が可能

チャットからの指示で、「Chrome」で意図したとおりに動作するか自動で検証する

ネットワークリクエストを解析してオリジン間リソース共有（CORS）の問題を発見できる。

コンソールログを検査して機能が期待どおりに動作しない原因を見つけられる
list_console_messagesで
devtoolsのconsoleを見てくれるようになる

AIエージェントにパフォーマンストレースを実行・分析をやらせ、どこに問題があるかを調べてもらう。

ChromeブラウザのUIをナビゲートしたり、フォームに入力したり、ボタンをクリックできるようになった。
ユーザー行動をシミュレートして不具合の再現が可能。
複雑なユーザーフローをテストができるようになった。

AIエージェントにライブページに接続してから、DOMとCSSを検査して、複雑なレイアウト問題を修正するための具体的な提案をしてもらえるようになった

「パフォーマンスチェックして」と頼むだけで、
DevToolsを自動操作して実用的なレポートが出力される

その他多数

しなくて良くなること

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

# gemini CLIの立ち上げ
gemini

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