Charles の実機デバック設定手順

前提：xcodeでシミュレーターによるデバックは可能な状態
(自分の環境では以下の手順で正常に動きましたが、
確認事項に抜けのある可能性があるので、うまく作動しない時は公式のreferenceを確認するのが確実です。
https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

mac OS

Proxy -> SSL Proxying Setting -> SSL Proxying -> includeのLocationが　* : *になっている
Proxy -> mac OS Proxyにチェックが入っている
Proxy ->Proxying Settings -> Proxies にてPortに8888が入っていて、
Support HTTP/2はチェックが入っていて
Enable transparent HTTP proxyingのチェックが入っていない状態にする(チェックが入っていると通信できなくなる)
Proxy ->Proxying Settings -> macOSではUse SOOCKS Proxy以外はチェックが入っている状態にする

Proxy -> start Proxy SSLを押して、Proxyを利用開始する

Android

gmailの下書きでchalseの証明書を送ってdownload
CA 証明書　で設定を検索して、chalseの証明書をsetup
ホスト名にHelp -> Local IP Addressのip Adressを、(iPAdressは.も入力する)
ポートへProxcy -> Proxcy Setting -> HTTP Proxyのポート番号を入力

このタイミングでmacとandroidを同じwifiに接続し、chalseのStart SSL Proxyを押せば、android側で開いたwebサイトが、chalse上にキャッチされるはずです。
されない場合は、必要なできていない設定が残っています。

また、開発したアプリで使用するには、以下のファイルを追加してmanifestに追記する必要があります。

1.AndroidManifest.xmlに下記を書き足す。

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
<application android:networkSecurityConfig="@xml/network_security_config"
... >
...
</application>
</manifest>

2. res/xml/network_security_config.xml を以下の内容で追加

<network-security-config> 
  <debug-overrides> 
    <trust-anchors> 
      <!-- Trust user added CAs while debuggable only -->
      <certificates src="user" /> 
    </trust-anchors> 
  </debug-overrides> 
</network-security-config>

Android7以上の端末でもCharlesで通信を確認できるようにする方法 - Qiita

上記サイトより引用

iOS

[ ①SSLの証明書のsetup]
http://chls.pro/ssl
上記サイトより開きSSL証明書をMacでinstall -> airDropでiPhoneに共有
設定画面の機内モードの上あたりに、SSLのinstallが表示されるはず
↓
iOS 10.3 以降を使用している場合は、Settings.app を開き、[General] > [About] > [Certificate Trust Settings] に移動して、Charles Proxy 証明書を見つけ、スイッチをオンにして完全な信頼を有効にします 

[②SSL Proxcyのsetup]
Macと同じWifiに接続して以下を設定

設定 > Wi-Fi > 対象のネットワークワーク を選択
HTTPプロキシをデフォルトのオフから手動へ変更。
サーバーにHelp -> Local IP Addressのip Adressを、(iPAdressは.も入力する)
ポートへProxcy -> Proxcy Setting -> HTTP Proxyのポート番号を入力。

手順の参考元:
Mac側の設定の確認

【開発支援ツール】Charlesの使い方【神ツール】 - Qiita

iOS端末側の設定の確認
https://rooter.jp/web-crawling/charles_http_native_app/

HTTP Proxy（Charles）を活用して開発効率をあげる - Qiita

公式　

SSL Certificates • Charles Web Debugging Proxy

Charlesでレスポンスを変える方法

①レスポンスのJSの内容を変えたい時はMap localを使う
-> 変えたいレスポンスを右クリックでlacalのjsの情報にレスポンスを変更可能

<詳細は以下記事のMap Localを参照>

Charlesの便利な機能・使い方 - Qiita

設定例

② http Status codeを変えたい時は,Breakpointを使う
(Rewriteだと自分の環境ではうまく動作しなかった)

-> Proxy > Breakpoint Settingsからedit breakpointからbreakPointを作る

以下設定例

スキームの設定が間違っていても動作しなくなるので
かく項目確認する
(Portとqueryは設定がない場合は必要なし)

指定したurlのリクエストの投げて、処理を止めた時に、
Edit responseでhttp status codeを変更してexcuteを押すと
変更したhttp status codeとして処理される

-> abort 中止
-> excute ステップ実行する

<詳細は以下記事のブレークポイントの有効・無効切り替えを参照>

Charlesの便利な機能・使い方 - Qiita