Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@dayoshix

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

はじめに

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

バックナンバー

俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ
俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その2〜 インストールと設定

セッション

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

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

141116-0011.png

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

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

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

ツールバー

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

141116-0004 2 (5).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, W3C CSS validatorW3C Feed validatorを)

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

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

View Type

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

Structureビュー

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

141116-0007 (2).png

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

141116-0008.png

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

Sequenceビュー

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

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

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

141116-0006.png

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

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

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

141116-0009.png

次回

HTTPリクエストに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
23
Help us understand the problem. What is going on with this article?