俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その3〜 最初に覚えたい基本的なこと

# はじめに

個人的にまず最初に覚えたほうがいいんじゃなかなーと思ったことを順に説明する。

## バックナンバー
[俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ](http://qiita.com/dayoshix/items/b658389eea076b2e8ec3)
[俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その2〜 インストールと設定](http://qiita.com/dayoshix/items/d02e46b033b8f7d9f471)


# セッション

一連のWebトラフィックの記録単位のようなもの。
複数作ることが出来てタブで切り替えることができる。

アクティヴにできるのはひとつだけでアクティブなセッションはタブのタイトルに`*`が付き判別できる。

![141116-0011.png](https://qiita-image-store.s3.amazonaws.com/0/31639/774eeec1-1a92-c37b-49d5-40a1882119e8.png)

新規にセッションを作成すると作成したセッションが自動的にアクティヴになる。
既存のセッションを再開した場合は記録を停止して、再開したいタブを選択して記録を開始する。

ファイルにも保存することが出来るのでバグ報告の参考資料として共有するのにも便利かと思う。

また、全てのセッションを閉じたとしてもプロキシサーバーとして機能はしている。

# ツールバー

かなり触る感じになるとは思う。

![141116-0004 2 (5).png](https://qiita-image-store.s3.amazonaws.com/0/31639/dd3ef51c-3428-8a78-17a9-498916e591c1.png)

1. New Session (`⌘ + n`)
新しいセッションを作って記録を開始する。
既にセッションを開いてた場合は非アクティブになり新しいセッションがアクティヴになる。

2. Open Session (`⌘ + o`)
ファイルに保存したセッションを開く。
セッションは4.のSave the Current Sessionで保存できる。

3. Close Current Session (`⌘ + w`)
アクティヴなセッションを閉じる。

4. Save the Current Session (`⌘ + s`)
アクティヴなセッションをファイルとして保存する。

5. Clear the Current Session (`⌘ + DEL`)
アクティヴなセッションの情報をクリアする。
セッション自体は閉じない。

6. Find text the current session(`⌘ + f`)
アクティヴなセッション内の情報をテキスト検索する。

7. Start Recording(`⌘ + r`)
アクティヴなセッションの記録を開始 or 停止する。

8. Start Throttling
ネットワークの帯域制限を有効 or 無効にする。
貧弱な回線で使った場合にどう見えるかシミュレートできる。

9. Enable Breakpoints
リクエストやレスポンスに設定したブレークポイントでブラウザが停止

10. Repeat
セッション内の選択しているリクエストをCharlesで再実行する。
Webブラウザから発生したHTMLへのGETリクエストを選択して再実行したとしても、あくまでもCharlesから再実行しているのでWebブラウザがリロードされるようなことはない。

11. Edit
セッション内の選択しているリクエストを編集して実行する。

12. Validate
選択したhtml、css、rssリクエストをW3Cのバリデータに発行しその結果を表示する。（それぞれ[W3C HTML validator](http://validator.w3.org/), [W3C CSS validator](http://jigsaw.w3.org/css-validator/)、[W3C Feed validator](http://validator.w3.org/feed/)を）

13. Tools
メニューの`Tools`にある機能を有効 or 無効にする。
それぞれの機能の設定はメニューから選択することによって可能。

14. Settings
メニューにあるToolsやProxyにあるよく使う機能のショートカット。

# View Type

画面の表示タイプにはStructure、Sequenceがある。
目的によって使い分けると捗る。

## Structureビュー

左のエリアにURLのホスト名、パスの構成要素単位にディレクトリツリー形式でリクエストが表示される。
右のエリアに右のエリアで選択したリクエストの詳細情報が表示される。
Webトラフィック全般を俯瞰したいときに使っている。

![141116-0007 (2).png](https://qiita-image-store.s3.amazonaws.com/0/31639/ad8c803d-0c7e-1545-9d59-090f5c76ac43.png)

ツリーの末端ノードがリクエストになる。
ディレクトリを選択するとその配下のリクエストのSummary情報が表示できる。`⌘`キーを押しながら複数選択も可能。

![141116-0008.png](https://qiita-image-store.s3.amazonaws.com/0/31639/76b07640-c38f-80fb-2e38-9f3ad270aa2e.png)

また、⌘キーを押しながらクリックして複数選択しても選択ノード配下を纏めた情報を見ることが出来る。

## Sequenceビュー

上のエリアにリクエストが発生順にリスト形式で表示される。
下のエリアに上のエリアで選択したリクエストの詳細情報が表示される。

上のエリアの下部にある`Filter:`でURLやStatusコードをインクリメンタルサーチできる。
ここでは正規表現が使える。

Webトラフィックの発生順やタイミングを確認したり、サクッとリクエストを絞り込みたいときに使っている。

![141116-0006.png](https://qiita-image-store.s3.amazonaws.com/0/31639/fa04ff8e-b24b-ba5f-4f70-39df607144c2.png)

# 画面のレイアウトを変える

StructureビューとSequenceビューそれぞれで画面内のエリアの分割方向を縦か横で変更できる。
個人的な使い方として、ブラウザとCharlesを横に並べて作業しているので両方とも縦分割にしている。

1. メニューから`Charles` > `Preferences` > `Viewers`を選択
1. `Structure View:`と`Sequence View:`で変更。`Tall`が縦、`Wide`が横。

![141116-0009.png](https://qiita-image-store.s3.amazonaws.com/0/31639/47ad33ac-4ed7-ff5b-0d9e-b48b6b309e39.png)

# 次回

[HTTPリクエストにCharlesでブレークポイントを貼ってみる](http://qiita.com/dayoshix/items/6e0d95b0cc0ea6f392bf)