1.簡介
Charles和Fiddler一樣也有個強大的功能，可以修改傳送到伺服器的資料包，但是修改前需要攔截，即設定斷點。設定斷點後，開始攔截接下來所有網頁，直到取消斷點。這個功能可以在資料包傳送之前，修改請求引數；在收到應答包，在js解析和瀏覽器渲染之前，修改返回結果。有了這個功能，開發者就可以修改不同引數測試server，同時也可以修改返回包測試自己的js函式，或測試頁面渲染。那麼怎樣進行Charles斷點操作呢？下面宏哥將為大家講解一下。
2.Charles設定斷點
Charles設定斷點的具體操作步驟如下：
2.1方法一
1.啟動Charles後，點選Proxy -> Breakpoint Settings... ，如下圖所示：
2.勾選 Enable Breakpoints ，如下圖所示：
3.點選Add ，新增 斷點規則 ，如下圖所示 ：
斷點規則欄位說明：
Scheme : 攔截進行斷點的介面方法，選項有 GET 和 POST
Protocol： 協議，選項有HTTP 和 HTTPS
HOST ： 域名，或者IP地址
Path ： 路徑
Query：URL 中 ？ 後面拼接的查詢引數
Request ： 在傳送請求的時候打斷點，可以修改請求內容，之後再把請求轉傳送給伺服器
Response：在請求響應回來的時候打斷點，可以修改響應內容，之後再把響應結果轉發給客戶端
【敲黑板知識點】
以上欄位支援萬用字元，比如說Path ，填寫 /test/api1 ，只支援攔截/test/api1 這一個介面，是全匹配，比如無法匹配 /test/api1/apis ；如果填寫/test/* ，就能夠匹配以/test/開頭的所有介面，比如 /test/api1 、/test/api1/apis
所有的欄位都是選填，如同我們常規理解的篩選條件一樣，但是為了規則的有效性，Request 和 Response 必須二選一。
2.2方法二
1.介面處 滑鼠右擊，選擇breakpoints（允許本介面使用breakpionts功能），如下圖所示：
2.進入Breakpoint Settings...裡，我們看到配置也新增到這裡，雙擊配置規則，看到部分已經填好了，我們補充剩下的即可。request和response兩個都勾選上了，如下圖所示：
3.Charles 斷點實踐
找了半天沒有免費的介面來演示實踐，索性自己用python簡單寫一個mock介面算了。有時候測試需要呼叫第三方介面進行測試，但是第三方介面沒有提供時，我們可以透過mock介面模擬第三方介面。
3.1安裝第三方模組
透過pip install flask安裝（flask是一個輕量級的web開發框架）。如下圖所示：
3.2flask模組的使用
flask模組有如圖四個部分，static是靜態檔案，存放js指令碼、CSS、圖片之類的檔案；templates存放HTML檔案，app.py存放介面。
app.run代表透過預設方式來訪問，即透過127.0.0.1：埠號：介面路徑來訪問。
3.2.1參考程式碼
# coding=utf-8? # 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行 # 2.註釋：包括記錄建立時間，建立人，專案名稱。 ''' Created on 2023-02-09 @author: 北京-宏哥 QQ交流群：705269076 Project: 《爆肝整理》保姆級系列教程-玩轉Charles抓包神器教程(8)-Charles如何進行斷點除錯 ''' # 3.匯入模組 from flask import Flask app = Flask(__name__) # 建立物件 # 編寫路由，用@app.route修飾把函式變介面，指定介面路徑和方法 @app.route('/users',methods = ["GET"]) def users(): return '''姓名 電話<br/> 張三  : 17788889999<br/> 李四  : 17788887777''' if __name__ == '__main__': # app.run() #使用預設方式啟動專案 app.run(host='0.0.0.0',port=5566,debug=True) #以除錯模式啟動專案 # host='0.0.0.0’，表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3）訪問介面
3.2.2執行結果
3.2.3瀏覽器訪問介面
在瀏覽器輸入相應網址後顯示如下圖所示：
3.3動態路由
動態路由就是輸入不同的URL，會有不同的內容返回。靜態路由是永遠一個介面對應著一個固定的URL，上面程式碼中的路由就是靜態路由。
3.3.1參考程式碼
# coding=utf-8? # 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行 # 2.註釋：包括記錄建立時間，建立人，專案名稱。 ''' Created on 2023-02-09 @author: 北京-宏哥 QQ交流群：705269076 Project: 《爆肝整理》保姆級系列教程-玩轉Charles抓包神器教程(8)-Charles如何進行斷點除錯 ''' # 3.匯入模組 from flask import Flask app = Flask(__name__) # 建立物件 users_info ={ '1801': ['123456','張三',9000], '1802': ['123456','李四',9000], '1803': ['123456', '王五',9000], } # 編寫路由 @app.route("/users/<string:account>", methods=["GET"]) # 動態路由 def get_user(account): if account in users_info: info = users_info[account] return f'尊敬的{info[1]}先生/女士，您的賬戶餘額為：{info[2]:.2f}元' else: return "賬號不存在" if __name__ == '__main__': # app.run() #使用預設方式啟動專案 app.run(host='0.0.0.0',port=5566,debug=True) #以除錯模式啟動專案 # host='0.0.0.0’，表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3）訪問介面
3.3.2執行結果
3.3.3瀏覽器訪問介面
在瀏覽器輸入相應網址後顯示如下圖所示：
3.4返回json格式資料
模組：jsonfy
使介面返回json格式的資料，json格式的資料也更方便後期的處理。
3.4.1參考程式碼
# coding=utf-8? # 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行 # 2.註釋：包括記錄建立時間，建立人，專案名稱。 ''' Created on 2023-02-09 @author: 北京-宏哥 QQ交流群：705269076 Project: 《爆肝整理》保姆級系列教程-玩轉Charles抓包神器教程(8)-Charles如何進行斷點除錯 ''' # 3.匯入模組 from flask import Flask from flask import jsonify app = Flask(__name__) # 建立物件 users_info ={ '1801': ['123456','張三',9000], '1802': ['123456','李四',9000], '1803': ['123456', '王五',9000], } #編寫路由,並返回json格式的資料 @app.route("/users/<string:account>",methods=["GET"]) #動態路由 def get_user(account): if account in users_info: info = users_info[account] return jsonify({"code":10000,"message":"success","data": {"name":info[1],"balance":info[-1]}}) else: return jsonify({"code":10001,"message":"account does not exist"}) if __name__ == '__main__': # app.run() #使用預設方式啟動專案 app.run(host='0.0.0.0',port=5566,debug=True) #以除錯模式啟動專案 # host='0.0.0.0’，表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3）訪問介面
3.4.2執行結果
3.4.3瀏覽器訪問介面
在瀏覽器輸入相應網址後顯示如下圖所示：
4.Charles斷點實戰
4.1測試介面
1.上邊的本地介面：GET方法也已經寫好了，主要是：輸入不同的使用者編碼，顯示不同賬戶的資訊。然後我們就利用上邊寫好的介面，進行一下Charles斷點實戰。先用谷歌瀏覽器的PostWoman Http外掛測試一下介面是否正常工作（你也可以用其他的介面測試工具）。如下圖所示：
4.2Charles設定斷點
4.2.1請求資料打斷點
1.按照前邊的步驟進行請求的斷點設定，在傳送請求時，進行請求的斷點攔截，將1801修改成1802，預期響應結果為返回：李四的賬戶資訊。如下圖所示：
2.在傳送請求時，攔截到介面，如下圖所示：
3.進入 Edit Request 頁面，將1801修改成1802，點選Execute 將介面放行轉發給伺服器。如下圖所示：
4.預期結果和實際結果一致，斷點修改成功。如下圖所示：
【敲黑板知識點】
需要注意的是，使用 Breakpoints 功能將網路請求截獲並修改過程中，整個網路請求的計時並不會暫停，所以長時間的暫停可能導致客戶端的請求超時。
4.2.2響應資料打斷點
1.按照前邊的步驟進行響應的斷點設定，在接到伺服器的響應之後，進行響應的斷點攔截，將響應結果：張三 修改成 北京-宏哥，預期響應結果為返回：北京-宏哥 的賬戶資訊。如下圖所示：
2.在接收響應資料時，攔截到介面，如下圖所示：
3.進入 Edit Response 頁面，將張三 修改成 北京-宏哥，點選Execute 將介面放行轉發給客戶端。如下圖所示：
4.預期結果和實際結果一致，斷點修改成功。如下圖所示：
【敲黑板知識點】
Tips: 有一點需要特別強調，這樣打斷點修改資料的方式特別考驗手速，以及每次操作的準確性。如果修改的時間過長，超出了客戶端的 超時時間 ，那麼本次的請求就會失效，哪怕最後請求響應成功，客戶端也不認了，因為晚了。
同理可以設定攔截post介面，宏哥在這裡就不再贅述。
5.小結
打斷點的意義：1.對request打斷點：修改 請求引數，繞過前端，將修改過的引數傳給服務端，看響應資料是否異常 2.對respones打斷點：修改 響應資料，篡改服務端返回資料，檢視前端處理是否異常。在實際工作中經常會遇到。
細心的小夥伴或者童鞋們會發現之前宏哥瀏覽器訪問介面時json中含有的中文變成亂碼。解決辦法也相當簡單隻需要一行程式碼。
app.config['JSON_AS_ASCII'] = False
5.1參考程式碼
# coding=utf-8? # 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行 # 2.註釋：包括記錄建立時間，建立人，專案名稱。 ''' Created on 2023-02-09 @author: 北京-宏哥 QQ交流群：705269076 Project: 《爆肝整理》保姆級系列教程-玩轉Charles抓包神器教程(8)-Charles如何進行斷點除錯 ''' # 3.匯入模組 from flask import Flask from flask import jsonify app = Flask(__name__) # 建立物件 users_info ={ '1801': ['123456','張三',9000], '1802': ['123456','李四',9000], '1803': ['123456', '王五',9000], } #編寫路由,並返回json格式的資料 @app.route("/users/<string:account>",methods=["GET"]) #動態路由 def get_user(account): if account in users_info: info = users_info[account] return jsonify({"code":10000,"message":"success","data": {"name":info[1],"balance":info[-1]}}) else: return jsonify({"code":10001,"message":"account does not exist"}) if __name__ == '__main__': # app.run() #使用預設方式啟動專案 app.config['JSON_AS_ASCII'] = False #json中文亂碼 app.run(host='0.0.0.0',port=5566,debug=True) #以除錯模式啟動專案 # host='0.0.0.0’，表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3）訪問介面
修改後，再次訪問介面，就不會出現亂碼了，如下圖所示：
