セッション管理（HTTP）

HTTP API を使うと、WebSocket 接続なしでブラウザーセッションとタブを管理できます。セッションの作成、タブの一覧取得、リソースのクリーンアップといったライフサイクル操作に向いています。

始める前に、Browser Rendering - Edit 権限付きのカスタム API トークンを作成してください。

API リファレンスには、/devtools 配下のセッション管理エンドポイントがすべて記載されています。

ステップ 1: ブラウザーセッションを取得する

POST /devtools/browser エンドポイントで、新しいブラウザーセッションを作成します。セッションは指定したキープアライブ時間のあいだ有効です（この例では 10 分）。

curl "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/browser-rendering/devtools/browser?keep_alive=600000" \
	--request POST \
	--header "Authorization: Bearer {api_token}"

{
	"sessionId": "1909cef7-23e8-4394-bc31-27404bf4348f",
	"webSocketDebuggerUrl": "wss://api.cloudflare.com/client/v4/accounts/{account_id}/browser-rendering/devtools/browser/1909cef7-23e8-4394-bc31-27404bf4348f"
}

レスポンスの sessionId を保存します。以降のリクエストで使います。

ステップ 2: 指定 URL でタブを作成する

PUT /devtools/browser/{session_id}/json/new エンドポイントで、ブラウザーセッションに新しいタブを開き、指定した URL へ移動します。

curl "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/browser-rendering/devtools/browser/SESSION_ID/json/new?url=https%3A%2F%2Fexample.com" \
	--request PUT \
	--header "Authorization: Bearer {api_token}"

{
	"id": "8E598E996530FB09E46A22B8B7754F7F",
	"type": "page",
	"url": "https://example.com",
	"title": "Example Domain",
	"description": "",
	"devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/1909cef7-23e8-4394-bc31-27404bf4348f/page/8E598E996530FB09E46A22B8B7754F7F?jwt=...",
	"webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/1909cef7-23e8-4394-bc31-27404bf4348f/page/8E598E996530FB09E46A22B8B7754F7F?jwt=..."
}

ステップ 3: すべてのターゲットを一覧する

セッション内のすべてのターゲット（タブ）を一覧し、タブが作成されたことを確認して devtoolsFrontendUrl を取得します。

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

[
	{
		"id": "8E598E996530FB09E46A22B8B7754F7F",
		"type": "page",
		"url": "https://example.com",
		"title": "Example Domain",
		"description": "",
		"devtoolsFrontendUrl": "https://live.browser.run/ui/view?wss=live.browser.run/api/devtools/browser/1909cef7-23e8-4394-bc31-27404bf4348f/page/8E598E996530FB09E46A22B8B7754F7F?jwt=...",
		"webSocketDebuggerUrl": "wss://live.browser.run/api/devtools/browser/1909cef7-23e8-4394-bc31-27404bf4348f/page/8E598E996530FB09E46A22B8B7754F7F?jwt=..."
	}
]

ステップ 4: DevTools UI を開く

レスポンスの devtoolsFrontendUrl をコピーし、Chrome で開きます。この URL で、リモートのブラウザーセッションに接続した Chrome DevTools UI に直接アクセスできます。

開くと DevTools UI が読み込まれ、次の操作ができます。

DOM と CSS の検査
ブレークポイントを使った JavaScript のデバッグ
ネットワークリクエストの監視
コンソールメッセージの表示
コンソールでの JavaScript 実行
別の URL への移動

ステップ 5: クリーンアップする

作業が終わったら、ブラウザーセッションを閉じてリソースを解放します。

curl "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/browser-rendering/devtools/browser/SESSION_ID" \
	--request DELETE \
	--header "Authorization: Bearer {api_token}"

{
	"status": "closing"
}

トラブルシューティング

質問がある場合やエラーが発生した場合は、Browser Run の FAQ とトラブルシューティングガイドを参照してください。