📱

開発中のAndroidアプリをEmulatorで実行させた時の通信をCharlesで表示させる

2024/01/27に公開

前提

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ファイルはそれぞれ下記のような感じになってます。

AndroidManifest.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>
network_security_config.xml
<?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の方では表示されなくなってます。

サンプルコード

https://github.com/na8esin/Android-CharlesTest

注意

flutterアプリはこの方法だけだと覗けない可能性があります。
https://github.com/flutter/flutter/issues/20376

備考

Charlesがなぜか反応してくれない時は、
Proxy -> macOS Proxy
のところをon/offします。

しくみのテックブログ

Discussion