Chrome无头调试模式下页面空白问题排查

关键认知纠正 #

• 终端输出的ws://127.0.0.1:9223/devtools/browser/453bfeb7-9301-4898-b0bc-476fd9a78e23是DevTools的WebSocket调试端点，仅用于自动化工具（如Puppeteer）连接，不能直接在Safari地址栏输入。
• 你输入的127.0.0.1:9223缺少HTTP协议前缀，正确的网页访问地址应为http://127.0.0.1:9223。

具体排查与修复步骤 #

• 修正访问地址：在Safari地址栏输入完整的http://127.0.0.1:9223，此时会看到Chrome远程调试的页面，列出当前无头实例打开的页面（如google.com），点击对应条目即可进入调试界面。
• 检查启动命令正确性：MacOS下Chrome的官方启动命令应为/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome，你使用的chromec若为自定义别名，需确认其指向正确的Chrome程序路径，避免启动错误的进程。
• 启用Safari开发菜单增强兼容性：打开Safari偏好设置 → 高级 → 勾选“在菜单栏中显示开发菜单”；之后可通过开发菜单直接选择“localhost:9223”（若显示）快速连接调试会话。
• 排查端口占用：执行lsof -i :9223检查9223端口是否被其他程序占用，若占用则更换端口（如改为9224）重新启动Chrome。
• 优化无头模式参数：Chrome 112+版本的新无头模式（--headless=new）已无需--disable-gpu参数，多余参数可能引发异常，修正后的启动命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless=new --remote-debugging-address=127.0.0.1 --remote-debugging-port=9223 https://www.google.com

内容的提问来源于stack exchange，提问作者David