すぐに始めたい場合は、下のボタンを選択します。
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 オブジェクトは反復可能です。この性質を使い、ヘッダーをデバッグ出力する短いワンライナーをいくつか書けます。
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}`);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",
// ...
}"