如何在GitHub Codespaces中可视化运行Puppeteer(Chromium)？

方案一：搭建VNC桌面环境（最直观的可视化方案） #

如果要直接看到浏览器窗口，搭建VNC桌面是最可靠的方式：

• 安装桌面环境和VNC服务器：

  sudo apt update && sudo apt install -y xfce4 xfce4-goodies tightvncserver
  

• 初始化VNC服务器，设置访问密码（按提示操作，可选择跳过查看密码）：

  tightvncserver :1
  

• 配置VNC启动时加载xfce桌面：

  echo "startxfce4 &" > ~/.vnc/xstartup
  chmod +x ~/.vnc/xstartup
  

• 重启VNC服务器生效：

  tightvncserver -kill :1 && tightvncserver :1
  

• 在Codespaces的「端口」面板中，添加端口5901（VNC端口规则是590+显示号，这里用的是:1所以是5901），设置为本地访问或公开。
• 用本地VNC客户端连接localhost:5901，输入刚才设置的密码，进入桌面环境后，在终端里运行你的Puppeteer代码，headless: false模式的浏览器窗口会直接显示在VNC桌面中。

方案二：修复Xvfb配置（无桌面模拟显示） #

如果之前用Xvfb没成功，可能是启动或配置步骤有问题，按下面的流程重新操作：

• 安装Xvfb和依赖库：

  sudo apt install -y xvfb libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxtst6
  

• 启动Xvfb并设置环境变量，确保在同一个终端会话里运行后续命令：

  Xvfb :99 -screen 0 1024x768x16 &
  export DISPLAY=:99
  

• 运行Puppeteer代码时，添加--start-maximized参数确保窗口能正常初始化：

  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--start-maximized'
    ],
    env: { DISPLAY: ':99' }
  });
  

• 若还是不行，先检查Xvfb进程是否在运行：ps aux | grep Xvfb，或者尝试更换显示号为:0再试。

方案三：远程调试模式（用本地浏览器查看） #

如果不想在Codespaces里搞桌面，也可以把Codespaces中的Chrome实例映射到本地浏览器控制：

• 在Codespaces中启动带远程调试端口的Chrome：

  google-chrome --remote-debugging-port=9222 --no-sandbox --disable-setuid-sandbox &
  

• 在Codespaces端口面板中转发9222端口到本地。
• 本地浏览器访问localhost:9222，就能看到远程Chrome的实例列表，此时修改Puppeteer代码连接这个远程实例：

  const browser = await puppeteer.connect({
    browserURL: 'http://localhost:9222'
  });
  

  这种方式可以在本地浏览器中直接查看和操作Codespaces里的Chrome页面。

内容的提问来源于stack exchange，提问作者ds.xowos