Chrome DevTools MCPをWSL上で使う

Chrome DevTools MCPについて
インストール
1. Chromeのインストール
  1. リポジトリのアップデート
  2. google chrome のインストール
2. chrome devtools mcpの有効化

Chrome DevTools MCPについて

AIにmcpを通してchromeのdeveloper toolの内容を伝えられる機能
今まで画像を送ってイメージを伝えていたのが、mcpを通してcssやhtmlの構造まで詳細に渡せるようになる。

詳しくは以下をご参照ください
github: https://github.com/ChromeDevTools/chrome-devtools-mcp
blog: https://developer.chrome.com/blog/chrome-devtools-mcp?hl=ja

インストール

Chromeのインストール

まずwslにchromeが入っていない場合は以下で入れる

リポジトリのアップデート

sudo apt update
sudo apt upgrade

google chrome のインストール

cd /tmp # 適当な場所に移動
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install --fix-missing ./google-chrome-stable_current_amd64.deb

インストール出来ているかを確認

which google-chrome
# >>> /usr/bin/google-chrome
google-chrome
# >>> 何かしら起動メッセージ

この際に、.wslconfigのguiApplicationがfalseだと動作しないので、必要に応じてC:\Users\<name>\.wslconfigを確認

chrome devtools mcpの有効化

公式ドキュメントを参照して、使用しているAIAgentに合わせて有効化
https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file#mcp-client-configuration

例:claudeの場合

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest