本番ブラウザからステージングAPIをテストする方法:Header Modifier活用ガイド(2026)

Marcus Webb · 2026年9月20日

ステージング環境のAPIをテストしたいとき、多くの開発者がとる手段はVPN、プロキシ、あるいは専用のブラウザプロファイルだ。どれも動く。ただ、どれも面倒くさい。VPNはすべてのトラフィックをルーティングし直す。プロキシは証明書の問題を引き起こしやすい。専用プロファイルはログイン情報もブックマークも別管理になる。

Header Modifierはもっとシンプルな選択肢を提供する。特定のURLに特定のリクエストヘッダーを追加するだけだ。ルーティングは変わらない。他のブラウザタブに影響しない。

具体的な使い方

多くのシステムでは、バックエンドが特定のヘッダーの値によってリクエストの転送先を切り替える。たとえば:

  • X-Environment: staging
  • X-Target-Backend: staging
  • X-App-Version: next

これらは実在するヘッダーではなく、あくまで構成例だ。自分のシステムで使っているヘッダー名に置き換えてほしい。

Header Modifierでルールを追加するとき、設定する項目は三つだけ:

  1. ヘッダー名(例:X-Environment
  2. (例:staging
  3. URLパターン(例:*://api.example.com/*

このURLパターンが重要だ。*://*/*(すべてのURL)に設定してしまうと、そのChromeから出るあらゆるリクエストにヘッダーが付く。ステージングヘッダーが外部サービスや本番CDNに届いてしまう可能性がある。パターンは必ず必要なドメインに絞ること。

リクエストヘッダーとレスポンスヘッダー

はっきりさせておく。Header Modifierが変更できるのはリクエストヘッダーだけだ。

リクエストヘッダーとは、ブラウザがサーバーに送るもの(AuthorizationAccept-Language、カスタムのX-*ヘッダーなど)。レスポンスヘッダーはサーバーがブラウザに返すもの(Content-TypeCache-ControlAccess-Control-Allow-Originなど)。

「なぜAccess-Control-Allow-Originが変わらないんだ」と時間を無駄にするケースは多い。それはレスポンスヘッダーだから、変えられない。これを最初から理解しておくだけで、余計なデバッグが減る。

Chromeが無音で拒否するヘッダーがある

Chromeはいくつかのヘッダーを拡張機能から保護している。HostCookieContent-Lengthなど、セキュリティ上の理由で変更が禁止されているものがある。Header Modifierでそれらに対するルールを設定しても、Chromeはそのルールを黙って無視する。エラーメッセージは出ない。

どのヘッダーが保護されているかはChromeのdeclarativeNetRequestドキュメントに一覧がある。「ヘッダーの設定が効いていない」と感じたら、まずそのリストを確認する習慣をつけると時間が節約できる。

このブラウザにしか効かない

Header Modifierのルールが影響するのはそのChromeブラウザから発行されるリクエストだけだ。

curl、Postman、GitHub ActionsなどのCI/CDパイプライン、サーバーからのアウトバウンドリクエスト——これらにはまったく無関係だ。「Chromeでは確認できたのにCIでは本番APIに繋いだまま」は仕様通りの動作であって、バグではない。ローカル開発・QA確認に特化したツールだ。

ルールはChromeのSync機能で同じアカウントの他のデバイスにも同期される。自宅のMacと職場のMacで同じルールを使いたければ、一度設定すれば両方に反映される。逆に、特定のデバイスだけに限定したい場合は別のChromeプロファイルを使うか、テスト後にマスタースイッチをオフにする。

マスタースイッチで終わる

Header Modifierにはマスタースイッチがある。全ルールを一括で無効化するためのものだ。ルールは削除されない——オフにするだけで何も起きなくなり、次のテストのときに再度オンにするだけで使える。

テストが終わったらスイッチをオフにする。これを習慣にするだけで、ステージングヘッダーをうっかり本番セッションに送り続けるミスを防ぎやすくなる。


Header Modifierは無料でアカウント不要、収集するデータは何もない。ChromeウェブストアからインストールできるChrome専用の拡張機能だ。詳細はHeader Modifierの製品ページ開発者向けツールページで確認できる。

よくある質問

Header ModifierはChromeとEdge以外のブラウザでも使えますか?+
CORSのデバッグにHeader Modifierは使えますか?+
Chromeで変更できないリクエストヘッダーはありますか?+
ルールはブラウザを再起動しても有効ですか?+
マスタースイッチをオフにするとルールは削除されますか?+