Chrome の localhost:3000 通信をキャプチャする方法
このチュートリアルで学べること：
- Google Chrome で開発中に、
localhost:3000が Proxyman（または Charles）に表示されない理由を理解する - 従来の回避策を学ぶ：
/etc/hostsを使ってlocalhostをproxyman.debugにマップする - ✅ 新しいワンクリックの方法を使う：Google Chrome 向け Proxyman Automatic Setup（Current Profile または New Profile）
Web アプリ（Next.js、React、Vite など）を開発して API 呼び出しをデバッグしようとしたとき、ブラウザでは正常に動作しているのに Proxyman には何も表示されないと、混乱しやすいものです。
この記事では、Google Chrome から http://localhost:3000 の通信をキャプチャする、最も確実な方法を紹介します。
1. 問題：Google Chrome で Web 開発中に localhost:3000 をキャプチャできない
よくある構成は次のとおりです：
- アプリが
http://localhost:3000で動作している（Next.js の開発サーバー） - Chrome を開き、ローカルのサイトを表示する
- Proxyman（または Charles）で通信が見えると期待している
しかし、Proxyman には…何も表示されません。
さらに困ったことに、https://google.com などのリモートサイトは正しく表示されるのに、localhost へのリクエストだけがまったく表示されないことがあります。
2. 原因：localhost の通信はデフォルトではシステムプロキシを使わない
多くのプロキシツールは、通信をプロキシ経由にするために システムのプロキシ設定（またはブラウザのプロキシ設定）に依存しています。
ただし、ブラウザは通常、ローカルアドレスを特別に扱います：
localhost/127.0.0.1はループバックの通信である- デフォルトでは、通常 プロキシをバイパス します
そのため、リクエストは Proxyman や Charles に届かず、通信が何も見えない原因になっています。
3. 従来の解決策：/etc/hosts を編集して proxyman.debug を使う
従来の回避策は、ブラウザの URL で localhost を使わないことです。
代わりに localhost を proxyman.debug にマップし、そのホスト名でローカルサーバーを開きます。
3.1 /etc/hosts に proxyman.debug を追加する
ターミナルを開き、hosts ファイルを編集します：
- 次のコマンドを実行します：
sudo nano /etc/hosts
- 次の行を追加します：
127.0.0.1 proxyman.debug
- 保存して終了します。
これで、http://localhost:3000 を開く代わりに、次の URL を開きます：
http://proxyman.debug:3000
こうすると、Chrome は特別な localhost ではなく通常のホスト名として扱うため、プロキシツールでキャプチャできるようになります。
3.2 従来の方法の欠点
- 別のホスト名を使うことを覚えておく必要がある
- 一部の OAuth / リダイレクト URI やローカル開発ツールは、
localhostがハードコードされている場合があります - チームメンバーに説明するのが面倒で、忘れやすい
4. ✅ ワンクリックの新しい解決策：Google Chrome 向け Proxyman Automatic Setup
Proxyman には、/etc/hosts を編集する必要のない新しい方法があります。
Google Chrome を適切なプロキシ設定で起動するため、localhost の通信をキャプチャできます。
4.1 手順
- Proxyman を開く
- Command Palette を開く
- macOS：
Shift + Command + P - Windows/Linux：
Ctrl + Shift + P
- macOS：
- Automatic Setup と入力して開きます。
- Google Chrome を選択します。
- 次のいずれかを選択します：
- New profile（プロキシ専用のクリーンなブラウザが欲しい場合におすすめ）
- Current profile（既存の Chrome プロファイルを使いたい場合）
- Start をクリックします。
新しい Google Chrome ウィンドウが開きます。
4.2 完了：localhost:3000 をキャプチャできるようになりました
では、ローカルのサイトをもう一度開いてください：
http://localhost:3000
Proxyman に戻ると、localhost へのリクエストがキャプチャされているはずです ✅
- Chrome のウィンドウを複数開いている場合は、New profile を使うと、どの Chrome が Proxyman 経由になっているか常に把握しやすくなります。
- ⚠️ Proxyman を終了する場合は、現在開いている Google Chrome のウィンドウも閉じてください。そうしないと、その Google Chrome ウィンドウは Proxyman 経由になりません。
5. まとめ
このチュートリアルでは、localhost へのリクエストがプロキシツールをバイパスしがちな理由、従来の /etc/hosts による回避策の仕組み、そして Proxyman の Automatic Setup を使って localhost:3000 を 1 クリックでキャプチャする方法を解説しました。
それでもリクエストが表示されない場合は、Chrome DevTools を開き、Network タブで Disable cache を有効にして、Proxyman が開いた Chrome ウィンドウでページを再読み込みしてください。ブラウザのキャッシュや Service Worker は、新しいネットワークリクエストを送らずに古いデータを返すことがあります。また、New profile を使うと、拡張機能や保存済みのブラウザ設定が関係しているかどうかを手早く確認できます。
6. 関連記事
- Firefox ブラウザの HTTPS 通信をキャプチャする方法
- Firefox で SSL をデバッグするには？
- Proxyman で Next.js のサーバーサイド HTTP リクエストをキャプチャ
- Proxyman で Node.js から OpenAI API をデバッグする
- テスト用に API エンドポイントを本番から localhost へ切り替える
Proxyman は、高性能な macOS/Windows/Linux 向けアプリで、開発者が iOS 実機、iOS Simulator、Android 実機の HTTPS 通信をキャプチャできます。
https://proxyman.com からダウンロードできます。
