Claude Code(WSL)からWindows側のChromeにplaywright-mcpで繋ぐ
WSL2の networkingMode
を mirrored
にすることで、WSLから localhost
でCDPのデバッグポートに接続できます。これにより、Claude CodeからWindows上のChromeをplaywright-mcpで簡単に操作できます。
networkingModeをmirroredにする
Windowsのホームディレクトリの.wslconfig
の[wsl2]
セクションに設定を書き、wslを再起動(shutdown -> 起動)すればOKです。
[wsl2]
networkingMode=mirrored
デバッグポートが空いたChromeを起動する
Powershell等で起動してもよいのですが、以下のようなスクリプトを使ってWSLからWindows側のChromeを起動しています。remote-debugging-port
を有効にして起動し、空っぽのChromeが立ち上がりコンソールにjsonが出力されます。
#!/bin/bash
CHROME_PATH="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
"$CHROME_PATH" \
--remote-debugging-port=9222 \
--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
Chrome 136より、remote-debugging-port
をあけるときはデフォルトではないプロファイルにスイッチすることが必須になったので、--user-data-dir
が必要になりました。今回はtempを指定していますが、専用のプロファイルがある場合はそのパスを指定します。
セキュリティを強化するためのリモート デバッグ スイッチの変更 | Blog | Chrome for Developers
Claude Codeにplaywright-mcpを登録する
--cdp-endpoint
にデバッグポートのURLを指定することで、Windows側のChromeに接続させます。プロジェクトに関係なくユーザスコープで登録したいので、-s user
を指定しています。
claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --cdp-endpoint http://localhost:9222
実際に使ってみる
Claude Codeを起動し、 /mcp
等でmcpサーバーへの接続を確認します。「playwrightでgoogleにアクセスして」のような指示をだすと、最初に起動していた空のブラウザが操作され、Google.comが表示されます。
networkingMode=mirroredの注意点
networkingMode=mirrored
を指定すると、localhost
でWindowsホストとWSL内の両方のプロセスにアクセスできます。しかし、WSL内で開発用のサーバーを立てている場合は、0.0.0.0
にバインドしなければWindows側からアクセスできない場合があります。
たとえば、Railsを立ち上げる場合であれば、--bind=0.0.0.0
といったオプションが必要になります。ただ、dockerがマッピングしたポートはデフォルトで0.0.0.0
にバインドされるようなのであまり困ることはありませんでした。WindowsからWSL内へのアクセスができないときは、この点を確認してください。
うまくいかなかったら
以下の方法でどこに問題があるかを特定できます。
- chromeが動いているかを確認:
curl http://localhost:9222/json
をWindows、WSLで実行 -
claude --debug
でデバッグログを出力する - 適当なplaywrightのテストスクリプトをつくってmcpを経由せずに使ってみる
WSLのバージョン等
2025/07/09時点でほぼ最新のものを利用しています。
WSL バージョン: 2.5.9.0
カーネル バージョン: 6.6.87.2-1
WSLg バージョン: 1.0.66
MSRDC バージョン: 1.2.6074
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26100.1-240331-1435.ge-release
Windows バージョン: 10.0.26100.4484
Discussion