在WSL中使用Antigravity自动化浏览器调试

目录

在之前的文章中我们介绍了如果在WSL环境下使用Antigravity。

但是我在实际使用过程当中又遇到了新的问题，Antigravity的自动化浏览器调试无法在WSL环境下打开。

简单来说，就是在正常windows环境下写前端时，Antigravity会自己打开浏览器，自己去截图、操作，然后对比结果，看代码是否生效。这是非常方便的，但是在WSL环境下，Antigravity无法打开浏览器，效率大大降低。

下面一步步讲解如何解决这个问题。

策略： 通过端口转发桥接 WSL 连接，以使用 Windows 原生安装的 Chrome。这避免了 Linux 内部渲染缓慢的问题，并能利用您的 GPU。

1. Windows 设置（一次性）

请以管理员身份打开 PowerShell 执行以下步骤。

  1. 获取您的 WSL 网关 IP（在 WSL 终端内运行此命令）：

    ip route show | grep -i default | awk '{ print $3}'

    复制此 IP（例如 172.25.x.x）。我们将称其为 GATEWAY_IP。

  2. 配置端口转发（在 PowerShell 管理员中运行，请替换 GATEWAY_IP）：

    netsh interface portproxy add v4tov4 listenport=9222 listenaddress=GATEWAY_IP connectport=9222 connectaddress=127.0.0.1

  3. 开放防火墙（在 PowerShell 管理员中运行）：

    New-NetFirewallRule -DisplayName "Chrome Remote Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

2. WSL 设置与自动化

配置 Linux 自动建立通往 Windows 的隧道请求。

  1. 安装 socat：

    sudo apt update && sudo apt install -y socat

  2. 添加自动连接脚本： 将以下代码块追加到您的 ~/.bashrc（或 ~/.zshrc）文件中，以确保每次打开终端时都启动隧道：

    # --- Antigravity / Chrome Bridge Setup ---
# 1. Get Windows Gateway IP dynamically
WIN_IP=$(ip route show | grep -i default | awk '{ print $3}')

# 2. Start socat in background if not already running
if ! pgrep -f "socat TCP-LISTEN:9222" > /dev/null; then
    socat TCP-LISTEN:9222,fork,reuseaddr TCP:$WIN_IP:9222 &> /dev/null &
fi

  3. 应用更改：

    source ~/.bashrc

3. Antigravity IDE 配置

*前往 Antigravity Settings -> 侧边栏 Browser -> ADVANCED 栏下 *

  • Chrome Binary Path（Chrome 路径）： （通过 /mnt 挂载点使用您的 Windows Chrome 可执行文件路径） /mnt/c/Program Files/Google/Chrome/Application/chrome.exe

  • Browser CDP Port（浏览器 CDP 端口）： 9222

故障排除

如果在电脑完全重启后自动化失效，这可能是因为 WSL 的 IP 地址发生了变化。

  1. 在 WSL 中获取新 IP： 
    ip route show | grep -i default | awk '{ print $3}'
  2. 更新 Windows 规则（PowerShell 管理员）： 
    netsh interface portproxy set v4tov4 listenport=9222 listenaddress=NEW_IP connectport=9222 connectaddress=127.0.0.1

常见问题

问: 我的原始html+js项目，纯文件型的，没有使用打包工具起端口，还是无法自动打开调试？

答: 是的，Antigravity会使用浏览器打开文件路径，浏览器是Windows下的，文件路径是WSL环境下的，所以无法打开。如果是这类项目建议用live-server之类的启动，有一个端口，然后明确告诉Antigravity，让它进行调试。

问: 上面 PowerShell 的命令执行不了或者执行报错？

答: PowerShell要以管理员身份运行。

问: 电脑重启后失效了？

答: 正如上面的故障排除章节所说，电脑重启后，WSL 的 IP 地址可能会发生变化，需要重新配置。

问： 那WSL 的 IP 地址能固定下来吗？

答: 不能。

问：WSL环境下Antigravity可以打开浏览器自动调试了，但是Windows环境下又不行了？

答: 可能的，因为上面填写的浏览器的exe路径是在WSL环境下可访问到的，在Windows环境下访问不到。这时候需要把上面第三步Antigravity IDE 填写的配置清空。

如有更多问题，欢迎评论区讨论

目录