ヘッダーをコンソールにログ出力する

Headersオブジェクトの内容をMapを使ってコンソールにログ出力する。

export default {
  async fetch(request) {
    console.log(new Map(request.headers));
    return new Response("Hello world");
  },
};

export default {
  async fetch(request): Promise<Response> {
    console.log(new Map(request.headers));
    return new Response("Hello world");
  },
} satisfies ExportedHandler;

from js import Response

async def on_fetch(request):
    print(dict(request.headers))
    return Response.new('Hello world')

ヘッダーのコンソールログ出力

Headersオブジェクトをコンソールにログ出力する必要がある場合は、Mapを使用します：

console.log(new Map(request.headers));

Headersオブジェクトをすばやく文字列化する必要がある場合は、spread演算子を使用します：

let requestHeaders = JSON.stringify([...request.headers]);

ヘッダーをオブジェクトに変換するには、Object.fromEntriesを使用します：

let requestHeaders = Object.fromEntries(request.headers);

問題

Workersをデバッグする際には、リクエストやレスポンスのヘッダーを確認します。一般的な間違いは、次のようなコードを使って開発者コンソールにヘッダーをログ出力しようとすることです：

console.log(request.headers);

または、次のように：

console.log(`Request headers: ${JSON.stringify(request.headers)}`);

どちらの試みも、空のオブジェクトのように見える結果 — 文字列 "{}" — になりますが、request.headers.has("Your-Header-Name")がtrueを返すこともあります。これは、ブラウザが実装しているのと同じ動作です。

この現象が起こる理由は、Headers ↗オブジェクトがヘッダーを列挙可能なJavaScriptプロパティに保存しないため、開発者コンソールやJSON文字列化ツールがヘッダーの名前と値を読み取る方法を知らないからです。実際には空のオブジェクトではなく、不透明なオブジェクトです。

Headersオブジェクトは反復可能であり、これを利用してヘッダーをデバッグ出力するためのいくつかの簡単なワンライナーを開発できます。

Mapを通してヘッダーを渡す

Headersをconsole.log()に適した形式にするための最初の一般的なイディオムは、HeadersオブジェクトからMapオブジェクトを構築し、そのMapオブジェクトをログ出力することです。

console.log(new Map(request.headers));

これが機能する理由は：

Mapオブジェクトは、Headersのような反復可能なオブジェクトから構築できます。
Mapオブジェクトは、そのエントリを列挙可能なJavaScriptプロパティに保存するため、開発者コンソールがその中を確認できます。

ヘッダーを配列にスプレッドする

Mapアプローチはconsole.log()の呼び出しに対して機能します。ヘッダーを文字列化する必要がある場合、Mapを文字列化すると[object Map]以上のものは得られません。

Mapはそのデータを列挙可能なプロパティに保存していますが、それらのプロパティはSymbol ↗-キーです。このため、JSON.stringify()はSymbolキーのプロパティを無視します ↗ので、空の{}が返されます。

代わりに、Headersオブジェクトの反復可能性を利用して、スプレッド演算子 ↗（...）を適用する新しい方法を取ることができます。

let requestHeaders = JSON.stringify([...request.headers], null, 2);
console.log(`Request headers: ${requestHeaders}`);

Object.fromEntriesを使ってヘッダーをオブジェクトに変換する（ES2019）

ES2019は、ヘッダーをオブジェクトに変換するための呼び出しであるObject.fromEntries ↗を提供します：

let headersObject = Object.fromEntries(request.headers);
let requestHeaders = JSON.stringify(headersObject, null, 2);
console.log(`Request headers: ${requestHeaders}`);

これにより、次のような結果が得られます：

Request headers: {
  "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
  "accept-encoding": "gzip",
  "accept-language": "en-US,en;q=0.9",
  "cf-ipcountry": "US",
  // ...
}"

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings