概要
最近のChromeのアップデートでレスポンスヘッダーの書き換えができるようになっていました。まだExperimentの段階ですが、Chrome v111以降で使うことができます。
動作確認用ページ
以下のページでCORS（Cross-Origin Resource Sharing）エラーのサンプルがあるため、これを利用します。
コンソールでエラーが確認できレスポンスヘッダーには Access-Control-Allow-Originが無いことがわかります。
ページとしても「Cannot load resource.」のエラー文言が表示されている状態です。
設定手順
設定のExperimentsから Local overides for response headersを有効にします。
Networkパネルから任意のファイルを選び、 Add header を選択しフィールド名と値を設定します。
初回の設定時には設定情報を保存するためにローカルの任意のフォルダを選択する必要があります。
今回はCORSを有効にするため、Access-Control-Allow-Originを *として設定しました。
なお、Sourcesパネルから.headersファイルを直接編集することでURIのルール設定をすることもできます。
設定後はXHR2として動作するようになったので、APIから返却された内容を表示することができました。
おわりに
これまでもSourcesパネルでレスポンスボディーの書き換えができましたが、レスポンスヘッダーの書き換えができるとCross-Origin Resource SharingやContent Security Policy周りのデバッグが捗りそうです。
わざわざCharlesを立ち上げる必要もなくなりますね。