Charlesを使ってhttpsのサイトのリソースをローカルファイルに差し替える 🫖

昔はよく使っていたのですが、5年ぶりぐらいにCharlesを起動してみたところ、すっかり使い方を忘れていたので、ドキュメントを読みなおしました。

通信のモニタリングなどを行うソフトです。
いろんな使い道があるのですが、今回はリソースファイルをローカルのものと差し替えるために使用します。

例を挙げるのが一番わかりやすいと思うので具体例を挙げます。
Charlesを使えば、本番サイトをブラウザで確認する際に、サーバに上がっているCSSファイルを、ローカルで開発中のCSSファイルに差し替えることができたりするのです。
これは時と場合によってはとんでもなく役に立ちます。

httpsのサイトで使う場合は、証明書を作成する必要があります。

Charlesの Help > SSL Proxying > Install Charles Root Certificate を選択してキーチェーンに証明書を登録します。

キーチェーンに登録した証明書をダブルクリックして、信頼を「常に信頼」にします。

Charlesの Proxy > Proxy Setting... の macOSタブから Enable macOS proxy と Charlesの Proxy > macOS proxy にチェックを付けます。

Charlesの Proxy SSL Proxying Setting... から Enable SSL Proxying にチェックを入れ、IncludeのLocationを、

Host → *
Port → 433

と設定します。

当然特定のサイトだけを許可しても良いのですが、ワイルドカードを使ってすべてのサイトを許可しておきました。

これで基本的な準備は完了です。
あとは差し替えを行うサイトを個別に登録していきます。

Charlesの Tools > Map Local... から設定していきます。

Locationにサーバ上のファイルのパス、Local Pathにローカルファイルのパスを入力して、Enable Map Localにチェックを入れれば設定が有効になります。
デプロイ不要で開発中のファイルをプレビューできるのはありがたいですね。

みかづきブログ・カスタム