Live View

Live View を使うと、リモートの Browser Run セッションをリアルタイムで見て操作できます。自動化スクリプトのデバッグ、ブラウザーの動作の監視、タスクに人の介入が必要なときに手動で介入する（Human in the Loop を参照）ときに便利です。

Live View は、Puppeteer、Playwright、または Chrome DevTools Protocol (CDP) エンドポイントで作成したセッションを含む、任意の Browser Session で使えます。

ブラウザーセッションは、1 つのリモート Chrome インスタンスです。セッションは複数のタブを持てます。CDP はデバッグ可能な各項目をターゲットと呼び、ページターゲットは通常 1 つのブラウザータブを表します。Live View はページターゲットに接続します。

Cloudflare dashboard または生成した devtoolsFrontendUrl から Live View を開きます。生成 URL は、任意のブラウザーで Cloudflare のホスト型インターフェースを開きます。Chrome ユーザーは、代わりに Chrome DevTools で接続を開けます。

Cloudflare dashboard で Browser Run ページを開き、Live Sessions タブを選びます。アカウント内のすべてのアクティブなブラウザーセッションが表示されます。セッションを展開してタブを確認し、そのタブの Live View を開くには Open を選びます。

targets=true でセッションを作成するか、セッションのターゲットを一覧すると、API レスポンスには各ページターゲットの devtoolsFrontendUrl が含まれます。任意のブラウザーでこの URL を開き、Cloudflare のホスト型インターフェース経由でそのタブを監視または操作します。生成 URL は live.browser.run を使います。そのホスト名を直接訪問する必要はありません。

ホスト型 UI は 3 つの表示モードをサポートし、URL の mode パラメーターで制御します。

Browser Run は、Chrome DevTools を動かすプロトコルである CDP をサポートします。生成した devtoolsFrontendUrl が https://live.browser.run/ui/inspector?wss= で始まる場合、そのプレフィックスを devtools://devtools/bundled/inspector.html?wss= に置き換えます。

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

更新した URL を Chrome のアドレスバーに貼り付けます。Chrome はリモートタブ向けの組み込み DevTools インターフェースを開きます。devtools:// プロトコルは Chrome でのみ動き、devtools 表示モードだけをサポートします。

以降のセクションの API 例は、$ACCOUNT_ID が設定され、$CLOUDFLARE_API_TOKEN が Browser Rendering Write 権限を持つことを前提とします。

1. targets=true でブラウザーセッションを作成し、レスポンスに現在のページターゲットと生成した Live View 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-..."
}

targets[].devtoolsFrontendUrl はページ向けのホスト型インターフェースを開きます。targets[].webSocketDebuggerUrl は CDP クライアントをそのページに接続します。トップレベルの webSocketDebuggerUrl は CDP クライアントをブラウザーセッションに接続します。

2. 表示したいページターゲットを title または url で見つけます。その devtoolsFrontendUrl をコピーし、ブラウザーで開きます。新しいセッションは最初、about:blank ページを含みます。

実行中のセッションがあり、それに接続したい場合:

1. アクティブなセッションを一覧し、表示したいセッションの ID をコピーします。

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

2. セッション ID を使って、そのセッション内のターゲットを一覧します。

   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 をコピーし、ブラウザーで開きます。

ターゲットを一覧すると、すべてのページターゲットにデフォルトの devtoolsFrontendUrl が返されます。表示モード、接続期限、閲覧者の権限を変更するには、カスタム URL を生成します。

次の任意パラメーターで、生成リンクを設定します。

REST API レスポンスには id、options、devtoolsFrontendUrl、webSocketDebuggerUrl が含まれます。フロントエンド URL をブラウザーで開くか、WebSocket URL を CDP クライアントで使います。Cloudflare.getLiveView CDP コマンドは devtoolsFrontendUrl を返します。

読み取り専用の Live View guardrail は、生成した接続にだけ適用されます。ほかの接続と自動化スクリプトは、セッションを引き続き制御できます。セッションの guardrails は、セッション全体の HTTP と HTTPS 宛先を制限し、すべての Live View 接続で有効なままです。

Live View エンドポイント を使って URL を生成します。

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/browser-rendering/devtools/browser/$SESSION_ID/live_view" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"mode": "tab",
		"expiresInMs": 300000
	}'

閲覧者の操作をブロックするには、guardrails を { "mode": "readonly" } に設定します。

curl "https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/browser-rendering/devtools/browser/$SESSION_ID/live_view" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"mode": "tab",
		"guardrails": {
				"mode": "readonly"
		}
	}'

リンクはセッションをストリーミングしますが、ナビゲーション、入力、JavaScript 評価をブロックします。タブのタイトルは READ ONLY - で始まります。

CDP は Chrome のリモートデバッグプロトコルです。Cloudflare.getLiveView は、既存の CDP 接続上で Live View URL を生成する Cloudflare 拡張です。次の Puppeteer 例は、現在のページ向けの URL を生成します。

export async function getLiveViewUrl(page) {
	const cdp = await page.createCDPSession();

	const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView", {
		mode: "tab",
		expiresInMs: 300000,
	});

	return devtoolsFrontendUrl;
}

import type { Page } from "@cloudflare/puppeteer";

export async function getLiveViewUrl(page: Page): Promise<string> {
	const cdp = await page.createCDPSession();

	const { devtoolsFrontendUrl } = await cdp.send("Cloudflare.getLiveView", {
		mode: "tab",
		expiresInMs: 300000,
	});

	return devtoolsFrontendUrl;
}

人間オペレーターへの引き継ぎに Live View を使うには、Human in the Loop ワークフロー を参照してください。