← レシピへ戻る

ネットワーク通信を記録する

ネットワークキャプチャを有効にし、ページを読み込み、Guida が観測したリクエストを調べます。

ネットワークと HTTP 中級 JavaScript capture_network.js

前提条件

なし。

期待される結果

Guida が最近のリクエストを記録し、メソッド、ステータス、コンテンツタイプ、URL の一部をログに出します。

ソース例

capture_network.js

ネットワークキャプチャは、ページが何を読み込んでいるかを理解し、Web UI の裏にある API エンドポイントを見つけるのに役立ちます。

// ネットワーク通信を記録する - HTTP リクエストを監視する
//
// このスクリプトはネットワークキャプチャを有効にし、ページへ移動し、
// 発生した HTTP リクエストを調べます。API エンドポイントの発見や
// ページ挙動の理解に便利です。
// ブラウザータブを用意する
await g.tabs.newBrowserTab();
// ネットワークキャプチャを有効にする
g.network.enable();
g.log("ネットワークキャプチャを有効にしました。移動します...");
// リクエストを発生させるためページへ移動する
await g.nav.navigateToUrl("https://example.com");
// リクエストが記録されるまで少し待つ
await g.wait(2000);
// 記録済み通信を検索する
const traffic = g.network.search(null, {
limit: 10
});
g.log("記録したリクエスト数: " + traffic.length);
for (const entry of traffic) {
const status = entry.responseStatusCode || "pending";
const type = entry.contentType || "unknown";
g.log(" " + entry.method + " " + status +
" " + type + " - " + entry.url.substring(0, 80));
}
// 特定のリクエストパターンを待つこともできます
// const req = await g.network.waitForRequest("*/api/*", {
// timeout: 10000
// });
g.log("完了しました。詳細は History ペイン > Network タブを確認してください。");