Site cover image

blog by izumiz

blog by izumiz
2025-10-11
メモ

WSLのCodexからWindows上のChromeへChrome Devtools MCPをつなげる

Chrome DevTools の MCP を使いたい 1. WSLのネットワークモードを設定 2. WSLのCodexにChrome Devtools MCPをインストール 3. Windows側でChromeを起動する 4. 動作確認

Chrome DevTools の MCP を使いたい

フロントエンド開発でかなり役に立ちそうな Chrome Devtools MCP。

特に Console メッセージの取得やネットワークリクエストの取得、パフォーマンス解析など便利に活用できそうと思っています。

今までは、Chrome Devtools を自分で開いて、コンソールにでたログを手動でコピペしていたので、その作業がなくなるだけでもかなり楽になります。

AI エージェント用の Chrome DevTools（MCP） | Blog | Chrome for Developers
新しい Chrome DevTools MCP サーバーの一般公開プレビュー版。Chrome DevTools の機能を AI コーディング アシスタントに提供します。
Favicon of the bookmark site
https://developer.chrome.com
Site image of the bookmark

1. WSLのネットワークモードを設定

C:\User\user\.wslconfig を設定し、WSLを wsl --shutdown で一度シャットダウンします。 

[wsl2]
networkingMode=mirrored

2. WSLのCodexにChrome Devtools MCPをインストール

~/.codex/config.toml に chrome-devtools-mcp を追加する 

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

3. Windows側でChromeを起動する

コマンドラインオプションは適宜変更してください。 

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
--remote-debugging-port=9222 `
--user-data-dir="$env:TEMP\chrome-temp" `
--no-first-run `
--no-default-browser-check `
--disable-extensions

4. 動作確認

Codex からいい感じに呼び出してみましょう。

Chrome Devtools MCP を WSL の Codex から動かす

— Izumi (@izumiz.me) 2025-10-11T07:55:56.941Z
メモ