開発中のAndroidアプリをEmulatorで実行させた時の通信をCharlesで表示させる
前提
macOS Sonoma 14.2.1, Charles v4.6.5
今回はapk内にRoot Certificateを埋め込む形式を取ります。
他の方法としては、Emulator本体にインストールする方法があると思いますが、 wipe data
などをすると消えてしまいます。
Charles側の基本的な設定は公式のドキュメントが詳しいので、省略します。
Root Certificateを保存する
Helpのすごいわかりづらいところにありますが、まずは、Root Certificateを手元のPCに保存します。
pem形式で保存されます。
pemファイルをdebug/res/rawに配置
こんな感じで配置します。
また、上記で見えている2つのxmlファイルはそれぞれ下記のような感じになってます。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application android:networkSecurityConfig="@xml/network_security_config">
</application>
</manifest>
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<debug-overrides>
<trust-anchors>
<certificates src="@raw/charles_ssl_proxying_certificate"/>
</trust-anchors>
</debug-overrides>
</network-security-config>
debug-overrides
はdebugのリソース内に入れているので、必要ないかもしれませんが、念のためつけてます。
Wi-Fiの設定
こんな設定画面から、右上のペンマークをクリックして、プロキシの設定を表示し、
こんな感じで設定します。10.0.2.2はホストマシンのIPになります。
また、念のためモバイルデータ通信の方は、↓のように、切っておいた方がいいと思います。
こっちの通信はプロキシを通してないためです。
それと、Extended controlsの方から行うproxy設定の方は試してみましたが、うまくいかなかったので、No proxyのままで大丈夫です。
念のためrelease版では通信の中身が見えないことを確認する
debug
release
余談ですが、↑を見ると、たまに議論になる、httpsでGETのリクエストパラメータは見れるの問題の答えが出てました。
debugの方を見ると乗ってる、 /products/1
の部分がreleaseの方では表示されなくなってます。
サンプルコード
注意
flutterアプリはこの方法だけだと覗けない可能性があります。
備考
Charlesがなぜか反応してくれない時は、
Proxy -> macOS Proxy
のところをon/offします。
Discussion