3
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-15
1 / 25

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


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


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


そこでCharlesです。


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:


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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3