← Browser Run / browser-run / features

Live View

Live View umožňuje v reálném čase sledovat vzdálenou relaci Browser Run a pracovat s ní. Hodí se to při ladění automatizačních skriptů, sledování toho, co prohlížeč dělá, nebo při ručním zásahu, pokud úloha vyžaduje lidský vstup (viz Human in the Loop).

Live View je k dispozici pro každou Browser Session, včetně relací vytvořených pomocí Puppeteer, Playwright, nebo CDP koncové body.

K Live View se lze dostat třemi způsoby: přes Cloudflare dashboard, přes hostované uživatelské rozhraní (UI) na live.browser.run, nebo pomocí nativních Chrome DevTools.

V dashboardu Cloudflare přejděte na Browser Run a vyberte Live Sessions kartu. Zobrazí se všechny aktivní relace prohlížeče ve vašem účtu. Rozbalením relace zobrazíte její karty a poté vyberte Open k otevření Live View pro danou kartu.

Když vytvoříte relaci nebo vypíšete cíle prostřednictvím CDP endpointů odpověď API obsahuje devtoolsFrontendUrl pro každý cíl (kartu). Tuto adresu URL otevřete v libovolném prohlížeči a načtete tak uživatelské rozhraní DevTools, které je dostupné na adrese live.browser.run, která streamuje vzdálenou relaci do vašeho prohlížeče.

Hostované uživatelské rozhraní podporuje dva režimy zobrazení, které se ovládají pomocí mode parametr v URL adrese:

Protože Browser Run komunikuje standardním CDP, můžete vestavěné DevTools prohlížeče Chrome připojit přímo ke vzdálené relaci. Nahraďte https://live.browser.run/ui/inspector?wss= předpona v devtoolsFrontendUrl hodnotou devtools:// protokol:

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

Vložte tuto URL adresu do adresního řádku Chromu a připojte nativní DevTools ke vzdálené relaci prohlížeče. Získáte stejné rozhraní DevTools, jaké používáte pro lokální ladění. devtools:// protokol funguje pouze v Chrome a je omezen na režim zobrazení inspektoru.

1. Vytvořte relaci prohlížeče pomocí targets=true k zahrnutí cílových URL adres do odpovědi:

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. Zkopírujte devtoolsFrontendUrl z targets[0] a otevřete ji ve svém prohlížeči. Nyní máte živý interaktivní náhled vzdálené relace prohlížeče.

Pokud máte spuštěnou relaci a chcete se k ní připojit:

1. Vypište své aktivní relace:

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

2. Pomocí ID relace vypište cíle v této relaci:

   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. Zkopírujte devtoolsFrontendUrl a otevřete ji ve svém prohlížeči.

Při použití Puppeteer, Playwright nebo přímého připojení přes WebSocket můžete adresu URL Live View získat programově pomocí Cloudflare.getLiveView příkaz 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}`);

Viz Referenční příručka Human in the Loop pro úplné podrobnosti o parametrech a návratových hodnotách.