Help us understand the problem. What is going on with this article?

Charlesでスマホアプリデバッグ

Charlesでスマホアプリデバッグ

by noboru_i
1 / 25

スマホアプリを作るとき、サーバーから返ってくるデータを表示することありますよね?


でも、サーバサイドでデータを作るのが大変だったり、返すのが難しい異常系とかありますよね?


また、通信されている内容を確認したいことありますよね?


そこでCharlesです。

https://www.charlesproxy.com/


Charlesを自由に使うには、$50支払う必要があります。

ただし、いくつかの制限事項に目をつぶれば、機能的にはフルで利用し続けることができます。
(試用して良ければ、お金を払いましょう)


ただ、おそらく、エンジニア的にはmitmproxyの方が使いやすいです。
https://mitmproxy.org/

(私は、最初に使ったのがCharlesだったので、そのままですが。。。)


Charlesは比較的情報が見やすく、
GUIで設定できたり、
非エンジニアでも比較的とっつきやすいと思います。
(社内でも、ディレクターやテスターに使ってもらってます)


端末・アプリの設定

Proxyの設定が必要です。


また、いまどきは全通信が https だと思うので、端末・アプリ側の設定が必要です。
https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/


Charlesの動作イメージ

通常 : 端末 <-> サーバー

Charlesを利用した場合のイメージ :
端末 <- Wi-Fi -> PC上のCharles <-> サーバー


便利なケースを挙げていきます


知らないアプリのバグ修正をすることになった。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

対象の画面を開いてみて、通信されているAPIを特定できます。そのパスから、対象のコードをある程度特定できます。


APIからエラーが返ってくるけど、API側の問題か、アプリ側の問題かわからない。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

アプリ外でRecordingすることで、送受信している情報を第三者的に確認できます。


リクエストとレスポンスのRAWデータ全文を送れば、サーバ側も問題が特定しやすい。はず。


アプリでのAPI実行を、何度も繰り返したい。
(投稿APIを大量に叩いてデータを作成したり)

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Recordingしたリクエストをcurl形式にすることができる。


ログイン画面で、id/passを毎回入力するのが面倒。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Map remoteで、リクエストを改ざんして、特定のパスへのアクセス時に、任意のリクエストボディを設定できます。


レスポンスとして長い文字列を返したい。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Map remoteで、レスポンス内の特定の文字列を書き換えられます。


異常系のテストをしたい。500エラーなど。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Map remoteで、レスポンスステータス・ボディを書き換えられます。


異常系のテストをしたい。タイムアウトなど。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Breakpointを設定して、通信を止めることができます。


サーバがまだ実装されていないので、ローカルのJSONを返したい。

:arrow_down_small: :arrow_down_small: :arrow_down_small:

Map localでパスごとに返却するJSONを指定できます。


通信環境が悪いと問題が発生するらしい。
(並列処理がうまくいっていなかったり)

:arrow_down_small: :arrow_down_small: :arrow_down_small:

throttleをかけることができます。


こんな感じで、通信周りをいろいろ改ざんして、実装確認をすすめることができます。


ただし、いろいろやりすぎると、改ざんしていることを忘れてテストしてしまったりします。。 :sweat:

実際のレスポンスに切り替えたら、うまく動かなかったり :sweat::sweat:


適切に使い、自分のペースで開発/テストしていきましょう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away