实时视图

Live View 让你实时查看和交互远程 Browser Run 会话。这对于调试自动化脚本、监控浏览器正在执行的操作，或在任务需要人工干预时手动介入很有用（请参阅 Human in the Loop）。

Live View 适用于任何 Browser Session，包括使用 Puppeteer、Playwright 或 CDP 端点创建的会话。

有三种方式访问 Live View：通过 Cloudflare 仪表板、通过 live.browser.run 上的托管用户界面（UI），或使用原生 Chrome DevTools。

在 Cloudflare 仪表板中，前往 Browser Run 页面并选择 **Live Sessions（实时会话）**选项卡。这将显示账户中所有活动的浏览器会话。展开会话以查看其标签页，然后选择 Open（打开） 打开该标签页的 Live View。

通过 CDP 端点创建会话或列出 target 时，API 响应为每个 target（标签页）包含 devtoolsFrontendUrl。在任何浏览器中打开此 URL 以加载 live.browser.run 上托管的 DevTools UI，它将远程会话流式传输到你的浏览器。

托管 UI 支持两种查看模式，由 URL 中的 mode 参数控制：

由于 Browser Run 使用标准 CDP，你可以将 Chrome 内置 DevTools 直接连接到远程会话。将 devtoolsFrontendUrl 中的 https://live.browser.run/ui/inspector?wss= 前缀替换为 devtools:// 协议：

devtools://devtools/bundled/inspector.html?wss=live.browser.run/api/devtools/browser/SESSION_ID/page/TARGET_ID?jwt=...

将此 URL 粘贴到 Chrome 地址栏，将原生 DevTools 连接到远程浏览器会话。你将获得与本地调试相同的 DevTools 界面。devtools:// 协议仅适用于 Chrome，且仅限于检查器查看模式。

1. 使用 targets=true 创建浏览器会话，以在响应中包含 target URL：

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/browser-rendering/devtools/browser?keep_alive=600000&targets=true" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"

{
	"sessionId": "1909cef7-23e8-4394-bc31-27404bf4348f",
	"targets": [
		{
			"description": "",
			"devtoolsFrontendUrl": "https://live.browser.run/ui/inspector?wss=live.browser.run/api/devtools/browser/1909cef7-.../page/8E598E99...?jwt=...",
			"id": "8E598E996530FB09E46A22B8B7754F7F",
			"title": "about:blank",
			"type": "page",
			"url": "about:blank",
			"webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/1909cef7-.../page/8E598E99...?jwt=..."
		}
	],
	"webSocketDebuggerUrl": "wss://api.cloudflare.com/client/v4/accounts/{account_id}/browser-rendering/devtools/browser/1909cef7-..."
}

2. 从 targets[0] 复制 devtoolsFrontendUrl 并在浏览器中打开。你现在拥有远程浏览器会话的实时交互视图。

如果你有正在运行的会话并想连接到它：

1. 列出活动会话：

   curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/browser-rendering/devtools/session" \
   	--request GET \
   	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"

2. 使用会话 ID 列出该会话中的 target：

   curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/browser-rendering/devtools/browser/$SESSION_ID/json/list" \
   	--request GET \
   	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN"

   [
   	{
   		"id": "110850A800BDB8B593CDDA30676635CF",
   		"type": "page",
   		"url": "https://example.com",
   		"title": "Example Domain",
   		"description": "",
   		"devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=...",
   		"webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/28d75446-.../page/110850A8...?jwt=..."
   	}
   ]

3. 复制 devtoolsFrontendUrl 并在浏览器中打开。