Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

ヘッダーをコンソールに記録する

Map を使って Headers オブジェクトの内容をコンソールに記録します。

最終更新 Markdown で表示Agent セットアップ

すぐに始めたい場合は、下のボタンを選択します。

Cloudflare にデプロイ

GitHub アカウントにリポジトリが作成され、アプリケーションが Cloudflare Workers にデプロイされます。

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 workers import WorkerEntrypoint, Response

class Default(WorkerEntrypoint):
    async def fetch(self, request):
        print(dict(request.headers))
        return Response('Hello world')
use worker::*;

#[event(fetch)]
async fn fetch(req: HttpRequest, _env: Env, _ctx: Context) -> Result<Response> {
    console_log!("{:?}", req.headers());
    Response::ok("hello world")
}
import { Hono } from 'hono';

const app = new Hono();

app.get('*', (c) => {
  // Different ways to log headers in Hono:

  // 1. Using Map to display headers in console
  console.log('Headers as Map:', new Map(c.req.raw.headers));

  // 2. Using spread operator to log headers
  console.log('Headers spread:', [...c.req.raw.headers]);

  // 3. Using Object.fromEntries to convert to an object
  console.log('Headers as Object:', Object.fromEntries(c.req.raw.headers));

  // 4. Hono's built-in header accessor (for individual headers)
  console.log('User-Agent:', c.req.header('User-Agent'));

  // 5. Using c.req.headers to get all headers
  console.log('All headers from Hono context:', c.req.header());

  return c.text('Hello world');
});

export default app;

ヘッダーをコンソールに記録する

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",
  // ...
}"

役に立ちましたか?