← Browser Run / browser-run / features

Live View

Live View позволяет видеть удаленный сеанс Browser Run и взаимодействовать с ним в реальном времени. Это полезно для отладки автоматизированных скриптов, наблюдения за действиями браузера или ручного вмешательства, когда задача требует участия человека (см. Human in the Loop).

Live View доступен для любого Browser Session, включая сессии, созданные с помощью Puppeteer, Playwright, или CDP конечные точки.

Существует три способа получить доступ к Live View: через панель управления Cloudflare, через веб-интерфейс (UI) по адресу live.browser.run, или с помощью встроенных Chrome DevTools.

На панели управления Cloudflare перейдите к разделу Browser Run страницу и выберите Активные сеансы вкладку. Здесь отображаются все активные сессии браузера в вашем аккаунте. Разверните сессию, чтобы увидеть её вкладки, затем выберите Открыто чтобы открыть Live View для этой вкладки.

При создании сессии или получении списка targets через CDP эндпоинтов ответ API включает devtoolsFrontendUrl для каждой цели (вкладки). Откройте этот URL в любом браузере, чтобы загрузить интерфейс DevTools, размещённый по адресу live.browser.run, который транслирует удалённую сессию в ваш браузер.

Веб-интерфейс поддерживает два режима просмотра, которые задаются mode параметр в URL:

Поскольку Browser Run работает по стандартному протоколу CDP, вы можете подключить встроенный DevTools Chrome напрямую к удалённому сеансу. Замените https://live.browser.run/ui/inspector?wss= префикс в devtoolsFrontendUrl на 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 чтобы включить целевые 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. Скопируйте devtoolsFrontendUrl от targets[0] и откройте его в браузере. Теперь у вас есть живое интерактивное представление удалённого сеанса браузера.

Если у вас есть запущенная сессия и вы хотите подключиться к ней:

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 сеанса, получите список targets в этом сеансе:

   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 и откройте его в браузере.

При использовании Puppeteer, Playwright или прямого подключения по WebSocket можно программно получить URL Live View с помощью Cloudflare.getLiveView команду CDP:

// Create a CDP session from your page
const cdp = await page.createCDPSession();

// Get all targets
const { targetInfos } = await cdp.send("Target.getTargets");

// Find a specific target (for example, a page with a specific URL)
// or if there's only one page, just grab the first one
const target =
	targetInfos.find((t) => t.type === "page" && t.url.includes("example.com")) ||
	targetInfos[0];

if (!target) {
	throw new Error("Target not found");
}

const targetId = target.targetId;
console.log(`Selected target: ${targetId}`);

// Get the Live View URL for the selected target
const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView", {
	targetId, // use the target ID from above, this is optional, if omitted the current target will be used
	mode: "tab", // Options: "devtools", "tab", or "full"
	expiresInMs: 300000, // optional, default is 5 minutes (max 1 hour)
});

console.log(`Live View URL: ${devtoolsFrontendUrl}`);

См. Справочник Human in the Loop с подробным описанием параметров и возвращаемых значений.