Chrome DevTools MCPをもっと便利に使う - リモートデバッグモードで事前準備

はじめに

Chrome DevTools MCPを使うとき、Chromeをリモートデバッグモードで起動しておくと便利です。

事前にログインしておいたり、意図したページを開いておいたりできるので、「このタブのログ見て！」みたいな指示がすぐできます。

Chromeをリモートデバッグモードで起動

Macの場合、こんな感じでChromeを起動しておきます。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/puppeteer-user1

--remote-debugging-port=9222 でポート9222を開けて、--user-data-dir で専用のプロファイルを作ってます。普段使いのChromeと分離できるので便利。

Chrome DevTools MCPの設定

MCPサーバーの設定ファイルに以下を追加。

"chrome-devtools": {
  "command": "npx",
  "args": [
    "chrome-devtools-mcp@latest",
    "--browserUrl=http://localhost:9222"
  ]
}

これで http://localhost:9222 に接続しにいきます。

何が便利？

事前にログインしておける

起動したChromeで必要なサービスにログインしておけば、毎回認証する手間がなくなります。

ページを開いておける

開発対象のページを開いておいて、「このタブのログ見て」って指示すればすぐアクセスできる。

手動操作と組み合わせられる

自分で操作して特定の状態にしてから、「今の状態でこのボタン押したらどうなる？」みたいな確認もできます。

まとめ

リモートデバッグモードでChromeを起動しておくと、ちょっとした準備で開発体験がかなり良くなるのでおすすめ。