wsl2环境下配置chrome-devtools-mcp, 连接windows中chrome的方法

iFlow 补给站
, ,
1

情景

开发环境是NAT模式WSL2中的Ubuntu，同时有多个开发容器，各自都装了iflow，希望在Windows中启动一个浏览器，各个iFlow能够连到同一个浏览器进行操作。

思路

Windows下启动一个带开发端口的Chrome/Edge，遇到2个问题：

  1. NAT状态下的WSL2不能通过localhost直接访问Windows端口
  2. 虽然可以通过Windows的IP访问到，但会被Chrome拒绝

解决办法是通过Windows的netsh再进行一次转发

具体步骤

  1. 在windows中用cmd或运行打开，指定 --user-data-dir 和 --remote-debugging-port
    “C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe” --user-data-dir=“%TEMP%\chrome-mcp” --remote-debugging-port=9222
    注：我这里是Edge，你可以改成chrome的安装地址

  2. 使用netsh转发端口
    2.1. 在WSL2中运行ip route show | grep -i default | awk '{ print $3}'，获取Windows宿主机的ip地址，假设是{{win_ip}}。
    2.2. 在Windows上以管理员身份打开CMD/PowerShell，执行端口转发命令（把{{win_ip}}换成上一步获取的实际ip）：
    netsh interface portproxy add v4tov4 listenport=9222 listenaddress={{win_ip}} connectport=9222 connectaddress=127.0.0.1
    2.3. 在WSL2中测试curl http://{{win_ip}}:9222/json，可以正常响应，容器中测试也可以。

  3. 在WSL2或容器中，通过控制台安装mcp，（同样要用实际ip替换{{win_ip}}）
    iflow mcp add-json 'chrome-devtools' "{\"command\":\"npx\",\"args\":[\"chrome-devtools-mcp@latest\",\"--browserUrl=http://{{win_ip}}:9222\",\"--isolated=true\"]}"

  4. 打开iflow，执行/mcp refesh再次刷新mcp配置

这时应该可以正常使用了，建议模型用qwen-max，其他的感觉很容易出错。

4 个赞