CA Reward

Tech Blog

Tech Blogトップに戻る

Charlesを使ったフロントエンドデバッグ

2017.01.20

  • このエントリーをはてなブックマークに追加
  • Pocket
gonuu
gonuuフロントエンドエンジニア

こんにちは。開発部の後藤です。 今回はCharlesを使ったフロントエンドのデバッグについて紹介したいと思います。 Charlesは機能がたくさんあるので、このエントリーでは次の項目についていろいろ書きます。

  • Charlesの紹介
  • スマートフォンとCharlesをつなぐ
  • SSL通信の設定
  • Rewrite機能

Charlesの紹介

charles

まずは簡単にCharlesの紹介を。 CharlesはJavaで作られており、MacやLinux、Windowsで動くproxyアプリケーションです。

https://www.charlesproxy.com/

価格は1〜4人までが一人あたり50USドルになってます。価格についての詳細はこちらにあります。 無料でも利用できますが、30分くらい経つと強制終了してしまいます。

Charlesを通して交わされる通信のリクエストやレスポンス、ヘッダなどを表示してくれます。 PC上で開いているブラウザはもちろん、Charles経由で繋がったiPhone/Androidなどのスマートフォンの通信内容も表示できます。 それ以外にもたくさんの機能があるCharlesですが、今回はCharlesを使った実機デバッグの方法について書いてみようと思います。

(Version4からはHTTP2やIPv6にも対応しているようですが、今回はVersion3について書きます。)

今回の記事を作成する際に使用した環境は下記になります。

バージョン
macOS 10.10.5(Yosemite)
Charles 3.11.6
Java 1.8.0_112
iOS 10.2
Android 4.1.2

スマートフォンとCharlesをつなぐ

何はともあれCharlesとスマートフォンを繋いでみます。 (CharlesがインストールされたMacとスマートフォンが同じネットワークに接続している必要があります)

Mac

MacのIPアドレスとCharlesのポート番号を確認します。 iOS端末とAndroid端末で設定する際に必要になるので控えておきます。

 

IPアドレスの確認

ifconfigコマンドやシステム環境設定からMacのIPアドレスを確認します。 Charlesの[Help]メニューの[Local IP Address...]からも確認することができます。

local_ip_address

 

Charlesのポートを確認

Charlesの[Proxy]メニューから[Proxy Settings...]を選択します。 [Proxies]タブ内の[HTTP Proxy]にポート番号が記述されています。デフォルトでは「8888」が設定されていると思います。 環境に応じて変更することができます。 proxy_settings_port

iOS端末

[設定]アプリを開き[Wi-Fi]をタップします。 Macと同じネットーワークに接続している事を確認し、「i」ボタンをタップします。 最下部までスクロールし、[HTTPプロキシ]で[手動]をタップします。 [サーバ]の欄にMacで確認したIPアドレスを、[ポート]の欄にCharlesのポート番号を入力します。

以上でiOSの設定は完了です。

Android端末

[設定アプリ]を開き、[Wi-Fi]をタップします。 Macと同じネットワークに接続している事を確認し、ネットワーク名を長押しします。 ポップアップが表示されるので、[ネットワークを変更]をタップします。 ポップアップ最下部の[詳細オプションを表示]をタップし、[プロキシ]のドロップダウンメニューで[手動]をタップします。 [プロキシホスト名]にMacのIPアドレスを、[プロキシポート]にCharlesのポート番号を入力し、保存します。

以上でAndroid端末の設定は完了です。

接続

設定したスマートフォンで何かしらの通信を始めようとすると、Charlesが下記のような警告を表示します。

allow_deny_2

[Allow]をクリックする事でスマートフォンの通信内容をCharlesで表示できるようなります。

これでローカルの開発環境(localhost:3000など)を実機で確認できるようになるので、開発が捗ります。

SSL通信の設定

CharlesでSSL通信の設定を行うと、暗号化された通信の内容も確認できるので便利ですね。 次はHTTPS通信の内容も表示できるよう設定します。

Macの設定

 

証明書

まず、Mac側の設定です。 Charlesの[ヘルプ]メニューから[SSL Proxying]→[Install Charles Root Certificate]を選びます。

install_charles_root_certificate

するとmacOSのキーチェーンアクセスが起動します。 キーチェーンアクセスが下記のポップアップを表示するので、[追加]をクリックし証明書を追加します。 (すでに証明書が発行されている場合はこのポップアップは表示されません)

key_chain_1

「Charles Proxy Custom Root Certificate (built on ****)」という証明書が発行されているのが確認できると思います。 次にその証明書をダブルクリックして開き[信頼]の項目から、「この証明書を使用するとき」の項目で「常に信頼」を選びます。

 

ホストの登録

続いてCharlsの[Proxy]メニューから[SSL Proxying Settings]をクリックして設定を開きます。 [Enable SSL Proxying]チェックボックスをアクティブにし、[Add]ボタンから対象にするサイトのホスト名を入力します。

ssl_proxying_setting

 

確認

設定が反映されているか確認するために、例えばhttps://www.google.co.jp/などSSLのサイトを開いて通信の内容が表示されればOKです。

iOS端末、Android端末の設定

次にスマートフォン側の設定です。 Charlesとつながった状態で、http://www.charlesproxy.com/getssl/にアクセスすると証明書がダウンロードされるので、端末にインストールすれば完了です。

Rewrite機能

プロダクション環境とデベロップ環境でドメインやパスなどが異なるケースもあると思います。 そんな時はRewrite機能を使います。

Charlesの[Tools]メニューから[Rewrite]を選択します。 [Enable Rewrite]のチェックボックスをアクティブにし、[Add]ボタンをクリックして設定を追加します。

今回は下記のように上書きしたい場合を想定しています。

ホスト名の上書き

[Rules]ブロックで[Add]ボタンをクリックします。 [Type]で[URL]を選びます。 [Match]の[Value]にProductionのホスト名を入力します。 [Replace]の[Value]にDevelopmentのホスト名を入力し、[OK]ボタンをクリックします。

rewrite_url

パスの上書き

同じく[Rules]ブロックで[Add]ボタンをクリックします。 [Type]は[Path]を選びます。 [Match]の[Value]にProductionのパスを入力し、[Replace]の[Value]にDevelopmentのパスを入力し[OK]をクリックします。

rewrite_path

クエリパラメータの上書き

[Rules]ブロックの[Add]ボタンをクリックします。 [Type]は[Modify Query Param]を選びます。 クエリパラメータの値を書き換えたいので[Match]の[Name]には「q」と入力し、[Value]にはProductionの値「12345」を入力します。 [Replace]の方は[Name]はProductionと同様に「q」を入力し、[Value]にDevelopmentの値「54321」を入力し、[OK]をクリックします。

rewrite_modify_param

クエリパラメータの追加

[Rules]ブロックの[Add]ボタンをクリックします。 [Type]には[Add Query Param]を選びます。 [Match]には何も入力せず、[Replace]の[Name]に「debug」、[Value]に「true」を入力します。

rewrite_add_param

Bodyの設定

最後にBodyの設定です。 [Type]で[Body]を選びます。 [Where]で[Request]のチェックボックスを非アクティブにし、[Response]のチェックボックスをアクティブにします。 [Match]の[Value]にはDevelopmentのホスト名を入力します。 反対に[Replace]の[Value]はProductionのホスト名を入力し、[OK]をクリックします。

rewrite_body

これでProductionのURLをDevelopmentのURLに上書き完了です。

これらの設定は最初は面倒です。。。 ですが、Import/Export機能を使ってチーム内に共有すればその後もけっこう役に立ちます。

まとめ

今回はCharlesを使用したフロントエンドのデバッグ方法を紹介させていただきました。 Charlesは機能がとても豊富なのでフロントエンドのデバッグ以外にも様々な使い方ができると思います。 今となってはCharlesはフロントエンドの開発に無くてはならないツールです。

それでは。

gonuu
gonuuフロントエンドエンジニア