はじめに
株式会社エアークローゼットでエンジニアをしているtangoと申します。
この記事はエアークローゼット アドベントカレンダー2022の8日目の記事になります。
今回はプロキシアプリであるCharlesを使って、モバイルアプリをデバッグする方法を紹介したいと思います。
アプリ開発だけではなく、web開発の方でも使えるので、ぜひ最後までご覧ください。
背景
アプリ開発するときに、下記のような問題に直面した経験がある人も多いかと思います。
・最近、アプリが重い。ボタンを押しても反応がない。ネットワークが遅いのか
・なぜかお知らせを押すとエラーが出る。すぐにリクエストとレスポンスを見たいけどどうすればいいだろうか。
・APIを修正したけど、本番環境のアプリで試してみたいけどできるかな？
などなど
みなさんは、こんな時どうしますか？
みんなどうしますか？
一般の方法だと、Xcodeでアプリをビルドしてシミュレーターなどで、アプリを開いて、デバッグするという感じだと思いますが、他にもう１つの方法があります。
それは、Charlesを使うことです（チャールズ）
Charlesを使うことで、本番環境のアプリを直接デバッグでき、リクエスト・レスポンスを書き換えることができるので、かなり便利だなと思ってます。
Charlesの素敵なところ
Charlesはたくさんの機能を提供していますが、個人的には下記の機能が一番良いかなと思います。
・端末の通信内容を確認できる
・リクエストヘッダ内容とレスポンスを書き換えることができる。
・デザインの修正をデプロイ不要で確認できる。
・Breakpoint: 特定な通信に対してブレークポイントを設定できる。
・Throttling(スロットリング): 通信速度を制限できる。
Charlesダウンロード
CharlesはWindow, Mac OS, Linuxをサポートしています。
公式サイトからインストールすることができます。
https://www.charlesproxy.com/latest-release/download.do
ダウンロードしたら、Charlesの設定をしましょう。
Charles側のSSLプロキシ設定
メニュから、Proxy -> Proxy Settingsを選んで、ポートを8888に設定してください。
端末側の設定
次に、端末側の設定をしましょう。
① PCと同じWIFIを使ってください
② 一番下にある「プロキシを構成」を選ぶ
③ 手動を選ぶ
④ PCのIPアドレスとポートを入力してください
サーバー： PCのIPアドレス
ポート：8888
⑤ 保存する
しばらく待つと、PCの方で、下記のポップアップが出てきて、Allowを押してください
次に、端末にSSL証明書をインストールします。
Safariでhttps://chls.pro/sslを開いて、プロファイルをダウンロードしてください。
ダウンロードしたら、設定を開いて、「プロファイルがダウンロード済み」を押すと、インストールモーダルが表示されて、インストールをしてください。
インストール完了したら、その証明証を有効にする必要があります。
設定 -> 一般 -> 情報 -> 証明書信頼設定 -> Charlesを有効にしてください。
デバッグ方法
1. リクエスト・レスポンスを確認する
デバッグは結構簡単です。
まず、端末の方でアプリを開くと、Charles画面上でリクエストが表示されます。
SSL証明書を正しくインストールしないと、リクエストとレスポンスを見れないので、注意が必要です。
2. レスポンスを書き換える
次に、レスポンス書き換え方を紹介します。わかりやすいようにお知らせ画面を例にします。
メニューからTools -> Rewriteを選んでください。
Addボタンを押して、Protocol, Host, Port, Pathを自分に合わせて変更してください。
一番下にあるAddボタンを押して、TypeをBodyにし、WhereをResponseにして、Replaceのところで、書き換えたいレスポンスを貼り付けてください。
アプリ上で、お知らせ画面を開いたら、お知らせ内容が変わったことがわかると思います。画像のようにみてもらえばわかると思いますが、タイトルと説明文が変わっています。アプリをデプロイしなくても本番環境で直接デバッグできるので、開発効率が上がります。
...
"title": "テスト_2022 [XS,XL,XXLサイズ選定] 最大80%OFFのECO SALE開始!",
"description": "テスト",
...
他に、たくさんの機能がありますので、お時間あるときに使ってみてください。
あとがき
最後までご覧いただきありがとうございました。
エアークローゼット Advent Calendar 2022はまだ続きますので、興味あれば、ぜひ他のエンジニア、PMの記事もご覧いただければと思います。