Charles官網全方位解析

一、簡介

Charles是一款MacOS平台下的網絡代理工具，主要功能是攔截並記錄網絡瀏覽器和其他應用程序之間的數據通信。它廣泛應用於Web開發的調試和測試，也可以用於檢測惡意軟件、跟蹤用戶行為分析等。

二、功能特點

1、HTTP/SSL代理
Charles可以作為HTTP代理，截獲瀏覽器發送的請求和服務器返回的響應，方便在請求和響應之間進行修改和重放。同時，它也支持截獲SSL/TLS加密流量，並可以有效解密SSL/TLS連接。

2、請求重發
當發現有一次請求有問題時，Charles可以直接重新發送該請求，而無需手動再次輸入相同的請求參數。這樣可以提高調試效率，並方便開發人員處理需求。

3、數據流分析
實時觀察和分析數據流，獲取請求和響應詳細信息，方便開發人員進行調試，如查看HTTP請求/響應報文頭，請求參數列表和響應內容等。此外，還支持JSON和XML格式的數據格式化展示。

4、自動化腳本
Charles支持JavaScript腳本編寫，可以用來進行自動化測試和模擬測試。這將減少手動測試成本，同時提高測試的準確率。

5、網絡限速
為模擬較慢的網絡環境，可以設置網絡限速模式，從而更好的測試應用程序在不同網絡環境下的性能和表現。

三、使用教程

1、安裝和運行
下載安裝 Charles，在Mac APP Store或官方網站下載即可。運行前可先保存之前設置的代理，再進行運行。

  # 代碼示例
  brew install charles

2、重設代理
用Charles作為代理時，需將瀏覽器代理設置為127.0.0.1:8888。可以在Charles的菜單欄中選擇 Proxy -> Proxy Settings…來進行代理設置。

  # 代碼示例
  PORT=8888
  http_proxy=http://127.0.0.1:$PORT
  https_proxy=$http_proxy

3、截獲和分析數據
打開瀏覽器，在地址欄輸入想要訪問的網站，瀏覽器便會通過Charles進行訪問。Charles會記錄下所有的請求及其響應，可在“Structure”選項卡中進行觀察。此外，還可以選擇“Sequence”選項卡對請求/響應視圖進行查看和篩選。

  # 代碼示例
  if (window.XMLHttpRequest) {
     xmlhttp=new XMLHttpRequest();
  } else {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
  }
  xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
  xmlhttp.send();

4、請求/響應設置
在Charles中，可以進行相關的請求/響應編輯，如重發、修改或刪除請求。右鍵點擊選中的請求，選擇相關操作即可。

  # 代碼示例
  Request:
  GET /try/ajax/ajax_info.txt HTTP/1.1
  Host: www.w3school.com.cn
  Connection: keep-alive
  Pragma: no-cache
  Cache-Control: no-cache
  Accept: */*
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
  Referer: http://www.w3school.com.cn/tiy/t.asp?f=html_form_submit
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4

5、自動化腳本運行
Charles通過JavaScript腳本來進行自動化測試，選擇“Tools”選項卡，再選擇“Scripting”，即可打開JavaScript編輯界面。

  # 代碼示例
  function onRequest(context, next) {
      var requestFilter = {
          urls: ["http://example.com/*"]
      };
      var flow = context.getCurrentFlow();
      if (!requestFilter || requestFilter.urls.indexOf(flow.request.url) >= 0) {
          // 對請求進行處理，可以攔截或重寫等
      }
      // 轉移給下一個請求或者響應器
      next();
  }
  function onResponse(context, next) {
      // ...
      next();
  }

四、總結

Charles是一款功能強大的網絡代理工具，作為Web開發和測試的利器，使得開發工作變得更加輕鬆和高效。此外，通過Charles還可以進行數據流分析、請求重發、SSL/TLS流量解密和網絡限速等操作，進一步提高開發和測試的效率和準確性。