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

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

Charlesの使い方

charles

1.Charlesとは

1-1. はじめに

アプリ開発をしているとAPIのレスポンスを見たかったり、正しいドメインにアクセスしているかを確認したい場合が出てくると思います。

そんな時に便利なツールがCharlesです!(とても便利)

開発に携わるのならば、是非Charlesを使えるようになりましょう!!(とてもとても便利)

神ツールです


1-2. Charlesでできること

Charlesを使用すればこんなことができます。

通信のモニタリング
 -アクセスしたドメインやAPIのレスポンスを確認できます。

通信速度のシミュレーション
 -通信速度を変えて通信できるようになります。タイムアウトのテストなどができます。

データの上書き
 -APIのリクエストやレスポンスを書き換えることができます。

Charlesは無料期間があり、インストール後30日間はすべての機能を利用することができます。

しかし、30分ごとに強制再起動が行われるためウザいです。

ライセンス買ってください。

2.Charlesのインストール

2-1. インストール手順

Charlesのインストールはダウンロードページから、インストーラをダウンロードし、指示に従って手順を踏むだけで行えます。

使っているOSに合ったインストーラをダウンロードしましょう。

Charles_Download

Charlesがインストールできたら、次は設定を行います。

3.Charlesの設定

3-1. ProxySetting

Charlesを起動したら、メニューバーの Proxy -> Proxy Setting... を開きます。HTTP Proxyのポート番号はデフォルトのままで大丈夫です。(デフォルトは8888)

念のため"Enable transparent HTTP Proxy"にチェックを入れましょう。

Proxy_Setting

Proxy_Setting_Detail

また、WEBブラウザなどの通信を見たいなら、項目"macOS"の"Enable macOS Proxy"にチェックを入れます。 Proxy_Setting_macOS


3-2. SSLProxySetting

これでHTTP通信を見ることができるようになりました。次にHTTPS通信を見るために、SSLプロキシを有効にするための設定を行います。メニューバーから Proxy -> SSL Proxy Setting... を開きます。"Enable SSL Proxying"にチェックを入れ、Locationsに * (ワイルドカード)を追加します。

SSL_Proxy_Setting

SSL_Proxy_Setting_Detail

Locationの追加は、"Add"ボタンをクリックし、現れた画面のHostに * を入れ、"OK"ボタンをクリックすれば大丈夫です。
SSL_Add


3-3. SSL証明書

SSLの設定が終わったら、SSLの証明書をインストールします。SSL証明書はメニューバーの Help -> SSL Proxying -> Install Charles Root Certificate からインストールできます。 Charles_Root_Certificate

インストールすると、キーチェーンが表示されます。Charles Proxy Custom Root CertificateがCharlesのSSL証明書になります。

しかし、このままではHTTPS通信を行ってもSSLHandShakeが出てしまい、通信を見ることができません。なので証明書をダブルクリックし、"この証明書を使用する時"を常に信頼に変更します。

Certificate_Default

         

Certificate_Trust

4.iPhoneとAndroidの設定

4-1. 各端末の設定について

SSLの設定と証明書のインストールが終わったら、次はiPhoneとAndroidの通信を見るための設定を行います。

通信をキャプチャするためには、PCと端末は同一のWi-Fiに接続しておく必要があるため、あらかじめ同じWi-Fiに接続しておきます。
また、PC側で接続しているWi-FiのIPが必要になるので、メニューバーの Help -> Local IP Addressを選択して、現在のIPアドレスが表示されるので控えておきます。

IPアドレスが分かったら、端末のプロキシ接続設定を行います。
Local_IPAddress


4-1-1.iPhoneの場合

ホーム画面の 設定 -> Wi-Fi から接続しているWi-FiをタップしてWi-Fi設定画面を表示します。Wi-Fi設定画面の最下部にHTTPプロキシ項目があるので、"手動"にした上で、控えておいたIPアドレスポート番号を入力します。

これでiPhoneの通信をCharlesで見ることができます。

さらにSSL通信も見られるようにiPhoneに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Safariでhttp://www.charlesproxy.com/getsslを開きます。

するとインストール画面が開かれるので、そこからインストールします。これでSSL通信も見られるようになります。

★★2017-06-06追記★★

iOS10.3から証明書の設定項目が1つ加わりました。

ホーム画面の 設定 -> 一般 -> 情報の最下部にある証明書信頼設定がタップして証明書を信頼する必要があります。

参考サイト-Qiita


4-1-2.Androidの場合

設定からWi-Fi設定を開き、接続しているWi-Fiを長押しします。その後、ネットワーク設定を変更 -> プロキシ -> 手動とした上で、控えておいたIPアドレスポート番号を入力します。

次にAndroidに証明書をインストールします。証明書はCharlesを起動して、プロキシ接続をしたまま、Chromeでhttp://www.charlesproxy.com/getsslを開きます。

するとインストール画面が開かれるので、そこからインストールします。

注意すべき点は、両OSともCharlesを起動した上でプロキシ接続をしておくことです。そうしないと上記のURLを叩いても証明書のインストールができないため、確認した上でインストールしてください。

5.通信をキャプチャする

5-1. 通信内容の確認

上記までの設定が終わると、端末及びPC上の通信がCharlesに表示されます。また、端末の場合、初回接続時にアラートが出るのでAllowで通信のキャプチャを許可します。

Charles_Capture

画像のように通信しているドメインが表示されます。ドメインを開いていくと、エンドポイントのオーバービューを見ることができます。また、エンドポイントに対してのリクエストやレスポンスも確認することができます。


5-2. ブレークポイントを張る

Charlesではドメインやパスに対してブレークポイントを張る事もできます。ブレークポイントを張った状態で通信をすると、リクエスト及びレスポンス時に通信が一旦止まります。この時、レスポンスの内容を書き換えることができるので、アプリ開発でAPIを叩くテストをする時や、任意のレスポンス時の動作確認をするときはレスポンスを書き換えて確認しましょう。とても便利です。

Charles_request
Charles_response


5-3. レスポンスの編集

アプリ開発では、結構APIを叩きます。しかし、必要なAPIがまだ無かったり、メンテナンス中でアクセスできない状況も割とあります。

その時にレスポンスを自分で書き換えて、あたかもAPIが叩けた風にすることでAPIがなくてもテストや動作確認ができますので、ぜひ使いこなせるようにしましょう。便利だよ。

初めて使うときは何をどうすればいいのか戸惑う事もあると思います。もし分からないことがあればWikiを読み直したり誰かに聞いてみてください。Charlesを使ってストレスフリーなアプリ開発を目指しましょう!

6.参考文献

プロキシアプリで開発をスムーズに
通信系のデバッグには Charles が便利

Why not register and get more from Qiita?
  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