More than 5 years have passed since last update.

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

Last updated at 2014-11-26Posted at 2014-11-16

はじめに

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

バックナンバー

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

セッション

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

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

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

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

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

ツールバー

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

New Session (⌘ + n)
新しいセッションを作って記録を開始する。
既にセッションを開いてた場合は非アクティブになり新しいセッションがアクティヴになる。
Open Session (⌘ + o)
ファイルに保存したセッションを開く。
セッションは4.のSave the Current Sessionで保存できる。
Close Current Session (⌘ + w)
アクティヴなセッションを閉じる。
Save the Current Session (⌘ + s)
アクティヴなセッションをファイルとして保存する。
Clear the Current Session (⌘ + DEL)
アクティヴなセッションの情報をクリアする。
セッション自体は閉じない。
Find text the current session(⌘ + f)
アクティヴなセッション内の情報をテキスト検索する。
Start Recording(⌘ + r)
アクティヴなセッションの記録を開始 or 停止する。
Start Throttling
ネットワークの帯域制限を有効 or 無効にする。
貧弱な回線で使った場合にどう見えるかシミュレートできる。
Enable Breakpoints
リクエストやレスポンスに設定したブレークポイントでブラウザが停止
Repeat
セッション内の選択しているリクエストをCharlesで再実行する。
Webブラウザから発生したHTMLへのGETリクエストを選択して再実行したとしても、あくまでもCharlesから再実行しているのでWebブラウザがリロードされるようなことはない。
Edit
セッション内の選択しているリクエストを編集して実行する。
Validate
選択したhtml、css、rssリクエストをW3Cのバリデータに発行しその結果を表示する。（それぞれW3C HTML validator, W3C CSS validator、W3C Feed validatorを）
Tools
メニューのToolsにある機能を有効 or 無効にする。
それぞれの機能の設定はメニューから選択することによって可能。
Settings
メニューにあるToolsやProxyにあるよく使う機能のショートカット。