環境
mac電腦，Chrome + SwitchyOmega插件
charles
版本：3.11.5
選擇Max OS X Proxy，作爲系統的一個代理。Proxy -> Proxy Settings打開設置頁面，默認設置爲http proxy，端口8888.
配置SwitchyOmega
這個是chrome上用於路由切換的插件，如果需要“望長城內外”極力推薦此工具。在“選項”的配置情景模式，例如下圖：
開始使用
正常情況下，Chrome DevTool已經滿足了日常web開發的需求，但是有的特性：編輯request的參數、重定向request請求的資源、編輯response的數據，ChromeDevTool就無能爲力了。
啓動Recording
訪問監控
如果只需要監控特定域名下的請求，Proxy -> Recording Settings，配置Include、 Exclude。
SSL proxy
如果需要配置的域名是ssl，需要在 Help -> SSL Proxying -> Install Charles Root Certificate. 根據彈出窗一路做下去，還需要注意的地方：要將證書設置爲信任模式：
點開“信任” -> “使用此證書”：始終信任
然後在 Proxy -> SSL Proxying Settings，設置 Enable SSL Proxying，並且添加域名，例如：www.alipay.com。OK確認。
訪問網站
例如訪問https://www.alipay.com，在SwitchyOmega插件中做如下配置：
在Charles 中的Structure/Sequence模式下可以看到https://www.alipay.com的訪問記錄。
Breakpoint
Proxy -> Breakpoint Settings，這個設置需要調試的http請求，或者 在Structure/Sequence 下右鍵點選“Breakpoint”，在一次請求此url的時候Charles會自動暫停Request和Response，就可以修改Request和Response的內容。
Tool
Tool 目錄下，還有Map功能，把某個url proxy到其他url上、端口轉發之類的，探索吧