はじめに
WSL側にChrome Devtools Mcpを追加した場合、Windows側のChrome.exeを利用する方法について説明します。
WSLのnetworkingModeをmirroredに設定
.wslconfigにて、WSLのnetworkingModeをmirroedに設定します。通常、Windowsのユーザープロファイルディレクトリ直下にあります (例: C:\Users<ユーザー名>.wslconfig)。
[wsl2]
networkingMode=mirrored
設定が記載できたら、WSLのシャットダウンにて設定を反映させます。Win側のターミナルにて行います。
> wsl --shutdown
この設定で行ったことは、WSL側とWindows側が同じIPアドレスを共有する形にしました。そのため、WSLとWindows間をlocalhostで直接通信ができるようになりました。
元の設定(NATモード)
Windows側 WSL側
localhost (192.168.1.10) | localhost (172.x.x.x)
| |
+----[仮想NAT]-------+
↑
異なるIPアドレス
ポート転送が必要
mirroredモード
Windows側 & WSL側
localhost (192.168.1.10)
|
+---- 同一ネットワーク ----+
| |
Chrome.exe (Port 9222) WSL内のMCP
Chrome.exeをリモートデバッグで起動するスクリプトを作成
次のようなスクリプトをWSL側に作成して、WSL側からChromeを起動します。
--remote-debugging-portにてChromeをリモートデバッグで起動するポートを指定しています。
Chrome 136よりセキュリティを強化するため--remote-debugging-portの動作変更が行われ、user-data-dirを指定してスイッチすることが必須となっています。
スイッチ（Switch）とは
「スイッチ」はChromeの起動オプション・コマンドライン引数のことを指します。
#!/bin/bash
CHROME_PATH="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
"$CHROME_PATH" \
--remote-debugging-port=9222 \
--remote-debugging-address=0.0.0.0 \
--no-first-run \
--no-default-browser-check \
--disable-gpu \
--user-data-dir=C:\\temp\\chrome-debug > /dev/null 2>&1 &
sleep 3
curl http://localhost:9222/json/version 2>/dev/null
bashでこのスクリプトを起動するとjsonが表示され、chromeが立ち上がると思います。
$ ./start-chrome-debug.sh
▼こんな感じのjsonがbashに表示されたら成功です。
{
"Browser":
"Protocol-Version":
"User-Agent":
"V8-Version":
"WebKit-Version":
"webSocketDebuggerUrl":
}
Chrome Devtools Mcpの登録
普段使用しているコーディングエージェントに、Chrome Devtools Mcpを登録します。
追加する際、引数として--browserUrl=http://127.0.0.1:9222指定します。これはchromeのリモートデバッグモードを起動しているポートになります。
Claude Codeの場合
bashにて次のコマンドを実行して登録
claude code mcp add chrome-devtools npx chrome-devtools-mcp@latest --browserUrl=http://127.0.0.1:9222
プロジェクトのルートディレクトリにて.mcpjsonを作成して登録
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://127.0.0.1:9222"
]
}
}
}
Codexの場合
bashにて次のコマンドを実行して登録
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl=http://127.0.0.1:9222
TOMLファイルで設定して登録
[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]
MCPの起動確認
登録したMCPが起動しているか、コマンド実行して確認します
Claude Code
/mcp
Codex
codex mcp list
chrome-devtools-mcpの情報だけ確認
codex mcp get chrome-devtools-mcp
実際に動作させてみる
※ 動作例はClaude Codeになります。
Chromeの起動
先程のスクリプトを実行することで、Chromeが起動すると思います。
▼ 起動したchromeはまっさら新品の状態だと思います。
コーディングエージェントにプロンプトを入力
今回は、例としてqiita.comにアクセスしてトップページのスクリーンショットを取得してもらいます。
qiita.comにアクセスして、トップページのスクリーンショットを取得してください。
取得した写真は, カレントディレクトリ内にphotoディレクトリを作成し、以下に配置してください。
実行してみる
起動したchromeがqiita.comにリダイレクトしました。gifでは分かりづらいですが、途中でスクリーンショットを取っているため一瞬ちらついていることもわかります。
撮ってきたスクリーンショット
指定したディレクトリ内に、ちゃんと保存してくれてます。
$ ls photo/
qiita_top.png
肝心のスクリーンショットですが、サイズ指定をしてなかったため、ページをまるまる撮影したみたいです。スクリーンショットの場合、サイズ指定は必須かもです。
おわりに
Chrome DevTools McpでWindows側のChromeを起動する方法についてまとめさせていただきました。分かりづらいところもあったと思いますが、方法として参考になれば幸いです。
wslのmirrerd設定を避けたい場合、WSL側にChromeを入れるのが手っ取り早いと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼