Charles Proxy – Phần 2 : Các tính năng tiêu biểu

Chào mừng bạn quay lại với Fx Studio. Ở Phần 1, chúng ta đã cùng nhau đi qua phần giới thiệu, cài đặt và cấu hình Charles Proxy. Nếu bạn chưa đọc, hãy ghé lại đó trước nhé – vì bài viết này giả định bạn đã thiết lập xong và Charles đang chạy ngon lành trên máy của bạn rồi.

Hôm nay, chúng ta sẽ đi vào phần thú vị hơn – các tính năng tiêu biểu mà một iOS Developer như bạn sẽ dùng đến thường xuyên trong quá trình debug và testing.

Nếu mọi việc đã ổn rồi, thì …

Bắt đầu thôi!

Đôi lời tản mạn

Bạn đã từng gặp tình huống này chưa: QA báo bug, bạn chạy thử thì không tái hiện được vì môi trường mạng đang quá tốt? Hay bạn muốn test một trường hợp API trả về lỗi 500 nhưng server đang hoạt động bình thường và bạn không thể chủ động “bắt” server làm vậy?

Đó chính xác là lúc các tính năng nâng cao của Charles Proxy phát huy tác dụng. Thay vì phụ thuộc vào server hay môi trường bên ngoài, bạn hoàn toàn có thể chủ động kiểm soát toàn bộ luồng network ngay trên máy của mình.

Trong bài viết này, mình sẽ giới thiệu một số tính năng mà mình thấy hữu ích nhất trong công việc hàng ngày.

Session – Xem và quản lý traffic hiện tại

Session là gì?

Trước khi đi vào các tính năng nâng cao, có một thứ mà bạn sẽ nhìn vào mỗi lần mở Charles – đó chính là Session.

Session là giao diện chính của Charles Proxy, nơi hiển thị toàn bộ các request và response đang được ghi lại theo thời gian thực. Mỗi lần bạn mở Charles và bắt đầu record, tất cả traffic đi qua máy tính đều xuất hiện tại đây.

Hiểu rõ cách đọc và thao tác trên Session sẽ giúp bạn debug nhanh hơn rất nhiều – bởi đây là điểm xuất phát của hầu hết mọi tác vụ trong Charles.

Chế độ xem Structure và Sequence

Charles cung cấp 2 chế độ xem chính cho Session, chuyển đổi qua 2 tab ở góc trên bên trái giao diện:

Structure – Xem theo cấu trúc host:

Traffic được nhóm lại theo từng host name, mỗi host là một node có thể mở rộng để xem các request bên trong. Vì vậy, đây là chế độ phù hợp khi bạn muốn theo dõi một API domain cụ thể và không bị phân tâm bởi các host khác.

Sequence – Xem theo thứ tự thời gian:

Tất cả các request được hiển thị theo thứ tự xuất hiện, không phân nhóm. Mỗi dòng là một request kèm theo thông tin nhanh: method, URL, status code, thời gian phản hồi, kích thước response. Nhờ đó, đây là chế độ phù hợp khi bạn muốn theo dõi luồng request theo timeline hoặc tìm kiếm một request cụ thể.

Xem chi tiết một request

Khi click vào bất kỳ request nào trong danh sách, phần panel bên dưới (hoặc bên phải) sẽ hiển thị toàn bộ thông tin chi tiết của request đó, chia làm 2 tab chính:

Tab Request – Thông tin của request được gửi đi:

• Headers: Toàn bộ HTTP headers, bao gồm Authorization, Content-Type, Cookie…
• Query String: Các tham số truyền qua URL
• Body: Nội dung body của request (nếu có – thường gặp với POST, PUT)

Tab Response – Thông tin phản hồi từ server:

• Headers: Response headers, bao gồm status code, Content-Type, Cache-Control…
• Body: Nội dung response trả về. Charles hỗ trợ hiển thị dưới nhiều dạng: Raw (text thuần), JSON (có format và highlight), XML, Hex…

Mẹo nhỏ: bạn có thể chọn JSON Text để Charles tự động format và highlight cú pháp JSON – dễ đọc hơn nhiều so với Raw text, đặc biệt với những response dài.

Các thao tác thường dùng trên Session

Bắt đầu / Dừng recording:

Sử dụng nút Start/Stop Recording (hình tròn đỏ) trên toolbar để bật/tắt việc ghi lại traffic. Khi đang record, icon sẽ sáng đỏ.

Xóa sạch Session hiện tại:

Khi danh sách request quá dài và lộn xộn, nhấn nút Clear the current Session (hình chổi quét) trên toolbar để xóa toàn bộ và bắt đầu lại từ đầu – session mới, giao diện sạch sẽ.

Lưu ý: Thao tác Clear không thể hoàn tác. Nếu bạn cần giữ lại traffic hiện tại, hãy Save Session trước khi Clear.

Tìm kiếm trong Session:

Dùng tổ hợp phím Cmd + F để mở thanh tìm kiếm. Bạn có thể tìm theo URL, host name, hoặc bất kỳ text nào xuất hiện trong request/response.

Xem nhiều Session cùng lúc:

Charles hỗ trợ mở nhiều Session tab song song – rất hữu ích khi bạn muốn so sánh traffic của 2 luồng khác nhau, hoặc giữ nguyên session cũ trong khi tiếp tục record session mới. Đi đến mục File > New Session để tạo thêm tab.

Recording Settings – Kiểm soát những gì được ghi lại

Recording Settings là gì?

Khi mới mở Charles, bạn sẽ thấy tất cả mọi traffic trên máy đều được ghi lại – từ request của app bạn đang debug, cho đến Slack, Spotify, Chrome, và cả hàng chục thứ chạy ngầm khác. Màn hình Charles lúc này trông như một bản tin tức giờ cao điểm – thông tin bay tứ tung, không biết đâu mà lần.

Recording Settings là tính năng cho phép bạn lọc trắng (chỉ ghi lại những host bạn quan tâm) hoặc lọc đen (loại bỏ những host không cần thiết) để Charles chỉ hiển thị đúng những gì bạn cần.

Cách sử dụng Recording Settings

1. Đi đến mục: Proxy > Recording Settings…

2. Tại cửa sổ Recording Settings, chọn tab Include hoặc Exclude:

• Include: Chỉ ghi lại traffic từ những host/URL được thêm vào danh sách này. Tất cả các host khác sẽ bị bỏ qua hoàn toàn.
• Exclude: Ghi lại tất cả, ngoại trừ những host/URL trong danh sách này.
  

3. Nhấn Add để thêm host muốn include/exclude. Tại cửa sổ Edit Location, điền thông tin:

• Protocol: https hoặc để trống để khớp cả hai
• Host: ví dụ api.example.com
• Port: để trống nếu không cần lọc theo port
• Path: ví dụ /v1/* nếu chỉ muốn lọc theo path cụ thể

4. Chọn OK > OK.

Mẹo nhỏ: Nếu bạn chỉ muốn debug một app cụ thể, hãy thêm domain API của app đó vào tab Include. Charles sẽ im lặng hoàn toàn với mọi thứ khác – giao diện sạch sẽ hơn hẳn, debug nhanh hơn nhiều.

Focus – Lọc và tập trung vào host cần quan tâm

Focus là gì?

Focus là tính năng cho phép bạn ghim một hoặc nhiều host lên đầu danh sách trong chế độ xem Structure, đồng thời gom tất cả các host còn lại vào một nhóm “Other Hosts” – giúp bạn không bị phân tâm bởi traffic không liên quan.

Tuy nhiên, khác với Recording Settings (ngăn Charles ghi lại traffic), Focus vẫn ghi lại tất cả nhưng giúp bạn nhìn thấy rõ hơn những gì quan trọng. Vì vậy, hai tính năng này bổ trợ rất tốt cho nhau.

Cách sử dụng Focus

Cách 1 – Focus trực tiếp từ danh sách request:

1. Trên giao diện Charles ở chế độ Structure, click chuột phải vào host bạn muốn focus.

2. Chọn Focus từ menu ngữ cảnh.

Host đó sẽ ngay lập tức được ghim lên đầu, trong khi tất cả các host còn lại sẽ bị gom vào Other Hosts.

Cách 2 – Quản lý Focus qua menu:

Đi đến mục: View > Focused Hosts… để xem và quản lý toàn bộ danh sách các host đang được focus, thêm mới hoặc xóa bỏ.

Lưu ý: Focus chỉ hoạt động ở chế độ xem Structure. Nếu bạn đang ở chế độ Sequence, bạn sẽ không thấy sự thay đổi này.

Throttle – Mô phỏng mạng chậm

Throttle là gì?

Throttle là tính năng cho phép bạn giả lập các điều kiện mạng kém như 3G, Edge, hay thậm chí mất kết nối hoàn toàn – ngay trên môi trường local của bạn.

Tính năng này cực kỳ hữu ích khi bạn muốn kiểm tra xem ứng dụng xử lý như thế nào trong điều kiện mạng thực tế: loading state có hiện không, timeout có được handle đúng không, hay UI có bị đứng hình không?

Cách sử dụng Throttle

1. Trên thanh menu của Charles Proxy, đi đến mục: Proxy > Throttle Settings…

2. Tại cửa sổ Throttle Settings, tích chọn vào Enable Throttling.

3. Ở mục Throttle preset, chọn kiểu mạng muốn mô phỏng. Charles cung cấp sẵn nhiều preset phổ biến:

4. Nếu muốn chỉ Throttle cho một host cụ thể thay vì toàn bộ traffic, tích chọn Only for selected hosts rồi nhấn Add để thêm host name mong muốn.

5. Chọn OK để lưu. Từ lúc này, toàn bộ request sẽ bị làm chậm theo cấu hình bạn vừa thiết lập.

Lưu ý: Nhớ tắt Throttle khi test xong. Bật Throttle mà quên tắt là một trong những nguyên nhân kinh điển khiến bạn ngồi ngơ ngác hỏi “sao mạng chậm thế này”

Để bật/tắt nhanh Throttle mà không cần vào Settings, bạn có thể dùng biểu tượng rùa 🐢 trên toolbar của Charles.

Map Local / Map Remote – Mock API

Map Local / Map Remote là gì?

Đây là một trong những tính năng đắt giá nhất của Charles Proxy đối với iOS Developer.

• Map Local: Trỏ một URL request sang một file JSON/text local trên máy tính của bạn. Thay vì gọi lên server thật, Charles sẽ trả về nội dung của file đó.
• Map Remote: Trỏ một URL request sang một URL khác – có thể là server khác, môi trường khác (staging, production…).

Cụ thể, tính năng này giúp bạn:

• Mock response API mà không cần backend làm gì cả
• Test các trường hợp đặc biệt (empty state, error state, data lạ…)
• Chuyển hướng API từ production sang staging để so sánh

Cách sử dụng Map Local

1. Chuẩn bị sẵn một file JSON chứa response mà bạn muốn mock, ví dụ mock_response.json:

{
  "status": "success",
  "data": {
    "userId": 1,
    "name": "Fx Studio",
    "email": "contacts@fxstudio.dev"
  }
}

2. Trên Charles Proxy, đi đến mục: Tools > Map Local…

3. Tại cửa sổ Map Local Settings, tích chọn Enable Map Local rồi nhấn Add.

4. Tại cửa sổ Edit Mapping, điền thông tin:

• Protocol: https
• Host: host name của API bạn muốn mock (ví dụ: api.example.com)
• Path: path của endpoint (ví dụ: /v1/user/profile)
• Local path: chọn đường dẫn đến file mock_response.json trên máy tính của bạn

5. Chọn OK > OK. Từ lúc này, mỗi khi ứng dụng gọi đến endpoint đó, Charles sẽ trả về nội dung file JSON thay vì gọi lên server thật.

Mẹo nhỏ: Bạn có thể sử dụng wildcard * ở Host hoặc Path để map nhiều endpoint cùng lúc.

Cách sử dụng Map Remote

1. Trên Charles Proxy, đi đến mục: Tools > Map Remote…

2. Tại cửa sổ Map Remote Settings, tích chọn Enable Map Remote rồi nhấn Add.

3. Tại cửa sổ Edit Mapping, điền thông tin:

• Map From: URL gốc mà ứng dụng đang gọi
• Map To: URL đích mà bạn muốn chuyển hướng đến

4. Chọn OK > OK.

Ứng dụng thực tế: Giả sử ứng dụng của bạn đang trỏ vào api.production.com, nhưng bạn muốn test với server staging api.staging.com mà không cần build lại app – Map Remote chính là giải pháp.

Rewrite – Chỉnh sửa request/response tự động

Rewrite là gì?

Rewrite là tính năng cho phép bạn định nghĩa các rule tự động để chỉnh sửa nội dung của request hoặc response – bao gồm URL, header, body, status code – mà không cần can thiệp thủ công vào từng request.

Về mặt này, điểm khác biệt so với Breakpoints (sẽ nói ở phần sau): Rewrite hoạt động tự động và liên tục theo rule bạn đặt ra, trong khi Breakpoints yêu cầu bạn can thiệp thủ công từng lần.

Cách sử dụng Rewrite

1. Trên Charles Proxy, đi đến mục: Tools > Rewrite…

2. Tại cửa sổ Rewrite Settings, tích chọn Enable Rewrite rồi nhấn Add ở khung bên trái để tạo một Rule Set mới.

3. Đặt tên cho Rule Set (ví dụ: Mock Error Response), sau đó nhấn Add ở khung bên phải để thêm rule.

4. Tại cửa sổ Edit Rewrite Rule, cấu hình rule:

• Type: chọn loại rewrite – ví dụ Response Status để đổi status code, Body để đổi nội dung body, Header để thêm/xóa/sửa header…
• Where: Response hoặc Request
• Value: giá trị muốn thay thế

Ví dụ thực tế: đổi status code response từ 200 thành 500 để test màn hình lỗi:

5. Chọn OK > OK. Rule sẽ được áp dụng tự động cho tất cả các request/response khớp với điều kiện bạn đặt ra.

Lưu ý: Rewrite rất mạnh nhưng cũng dễ gây nhầm lẫn nếu bạn quên đang bật rule nào đó. Hãy đặt tên Rule Set rõ ràng và tắt đi khi không dùng nữa.

Breakpoints – Chặn và chỉnh sửa request theo thời gian thực

Breakpoints là gì?

Breakpoints là tính năng cho phép bạn “dừng” một request hoặc response lại trước khi nó được gửi đi hoặc trả về ứng dụng – tương tự như đặt breakpoint trong code. Tại thời điểm đó, bạn có thể xem và chỉnh sửa trực tiếp nội dung của nó.

Đây là tính năng lý tưởng khi bạn muốn:

• Thử nghiệm một lần với một giá trị cụ thể (không muốn tạo rule Rewrite cố định)
• Kiểm tra xem ứng dụng phản ứng như thế nào với một response “lạ” nào đó
• Debug nhanh mà không cần sửa code hay server

Cách sử dụng Breakpoints

Cách 1 – Đặt Breakpoint trực tiếp từ request đã có:

1. Trên danh sách request ở giao diện Charles, tìm request bạn muốn đặt breakpoint. Click chuột phải vào request đó và chọn Breakpoints.

Từ lúc này, mỗi khi ứng dụng gọi đến URL đó, Charles sẽ tự động dừng lại và chờ bạn xử lý.

Cách 2 – Cấu hình Breakpoint thủ công qua Settings:

1. Đi đến mục: Proxy > Breakpoint Settings…

2. Tại cửa sổ Breakpoint Settings, tích chọn Enable Breakpoints rồi nhấn Add.

3. Tại cửa sổ Edit Breakpoint, điền thông tin URL muốn chặn và chọn chặn ở Request, Response hay cả hai.

Khi Breakpoint được kích hoạt:

Khi request bị chặn, Charles sẽ hiển thị một cửa sổ cho phép bạn:

• Xem toàn bộ nội dung request/response
• Chỉnh sửa bất kỳ phần nào (header, body, URL…)
• Nhấn Execute để tiếp tục gửi đi với nội dung đã chỉnh sửa
• Hoặc nhấn Abort để hủy request đó hoàn toàn

Lưu ý quan trọng: Khi Breakpoint đang chặn một request, ứng dụng của bạn sẽ bị treo và chờ đến khi bạn nhấn Execute hoặc Abort. Vì vậy, đừng để breakpoint kích hoạt rồi bỏ đi pha cà phê – ứng dụng sẽ trông như bị lag 😄

Repeat – Gửi lại request

Repeat là gì?

Repeat là tính năng cho phép bạn gửi lại một request đã có mà không cần thao tác trên ứng dụng. Bạn chỉ cần click vào request trong danh sách và bảo Charles gửi lại nó.

Tính năng này đặc biệt hữu ích khi:

• Muốn test lại API nhiều lần mà không cần mở app, navigate đến màn hình đó, thực hiện thao tác rồi chờ…
• Cần stress test – gửi một request hàng chục, hàng trăm lần liên tiếp để kiểm tra server có chịu tải không
• Vừa chỉnh sửa Rewrite rule và muốn xem kết quả ngay lập tức mà không cần trigger lại từ app

Cách sử dụng Repeat

Cách 1 – Repeat đơn giản (gửi lại 1 lần):

1. Trên danh sách request, click chuột phải vào request muốn gửi lại.

2. Chọn Repeat từ menu ngữ cảnh.

Charles sẽ gửi lại request đó ngay lập tức và kết quả sẽ xuất hiện như một request mới trong danh sách.

Cách 2 – Repeat Advanced (gửi lại nhiều lần, có cấu hình):

1. Click chuột phải vào request và chọn Repeat Advanced…

2. Tại cửa sổ Repeat Advanced, cấu hình:

• Iterations: Số lần lặp lại
• Concurrency: Số request gửi đồng thời (để test concurrent)
• Repeat Delay: Khoảng thời gian nghỉ giữa các lần gửi (milliseconds)

3. Chọn OK để bắt đầu.

Mẹo nhỏ: Kết hợp Repeat Advanced với Breakpoints hoặc Rewrite là cách nhanh nhất để kiểm tra một loạt các kịch bản response khác nhau mà không cần can thiệp vào app.

Export Session – Lưu và chia sẻ phiên làm việc

Export Session là gì?

Export Session là tính năng cho phép bạn lưu toàn bộ (hoặc một phần) các request/response trong phiên làm việc hiện tại ra file – để lưu trữ, chia sẻ với đồng đội, hoặc mở lại sau để phân tích tiếp.

Tính năng này cực kỳ hữu ích trong các tình huống:

• Bug report: Khi bắt được một bug lạ, bạn có thể lưu lại toàn bộ network traffic kèm theo ticket để dev backend phân tích
• Onboarding: Ngoài ra, chia sẻ session mẫu cho thành viên mới trong team giúp họ nhanh chóng hiểu luồng API của app
• So sánh: Cuối cùng, lưu session của bản cũ và bản mới để đối chiếu sự thay đổi

Cách sử dụng Export Session

Export toàn bộ session:

1. Trên thanh menu, đi đến mục: File > Save Session… hoặc File > Save Session As…

2. Chọn nơi lưu file và đặt tên. Charles sẽ lưu ra file với định dạng .chls – đây là định dạng riêng của Charles, chỉ mở được bằng Charles Proxy.

Export một số request cụ thể:

1. Giữ Cmd và click để chọn nhiều request trong danh sách.

2. Click chuột phải và chọn Export…, hoặc vào File > Export Session…

3. Chọn định dạng export:

Mở lại session đã lưu:

Đi đến mục: File > Open Session…, chọn file .chls đã lưu. Charles sẽ load lại toàn bộ request/response như lúc bạn bắt được ban đầu – kể cả khi không còn kết nối đến server nữa.

Mẹo nhỏ: Định dạng .har được nhiều công cụ hỗ trợ hơn. Nếu bạn muốn chia sẻ với dev backend (người không dùng Charles), hãy export ra .har để họ có thể mở bằng Chrome DevTools hoặc các HAR Viewer online.

Tạm kết

Vậy là chúng ta đã cùng nhau đi qua 9 tính năng tiêu biểu của Charles Proxy:

• Session – Giao diện trung tâm để xem và thao tác với toàn bộ traffic theo thời gian thực
• Recording Settings – Lọc traffic ngay từ đầu, chỉ ghi lại những gì cần thiết
• Focus – Ghim host quan trọng lên đầu, gom phần còn lại sang một chỗ
• Throttle – Mô phỏng điều kiện mạng kém để kiểm tra độ ổn định của ứng dụng
• Map Local / Map Remote – Mock API response từ file local hoặc chuyển hướng sang server khác
• Rewrite – Tự động chỉnh sửa request/response theo rule, không cần can thiệp thủ công
• Breakpoints – Dừng và chỉnh sửa request/response theo thời gian thực
• Repeat – Gửi lại request nhanh chóng mà không cần thao tác trên app
• Export Session – Lưu và chia sẻ phiên làm việc dưới dạng file

Mỗi tính năng giải quyết một bài toán khác nhau trong quá trình phát triển và kiểm thử ứng dụng. Nhờ đó, khi kết hợp linh hoạt các tính năng này, bạn sẽ không còn phụ thuộc vào server hay môi trường bên ngoài nữa – mọi thứ đều nằm trong tầm kiểm soát của bạn.

Tới đây, mình xin kết thúc bài viết Phần 2 – Các tính năng tiêu biểu của Charles Proxy. Rất mong nhận được những ý kiến đóng góp từ mọi người thông qua phần bình luận.

Tài liệu tham khảo:

• Charles Proxy Guide by nmint8m.  Xin gởi lời cảm ơn đặc biệt đến chủ nhân repo này vì đã đồng ý cho mình mượn ý tưởng viết bài.
• Charles Proxy: Developer’s Guide by Abhishek Ravi
• Charles Proxy – Phần 1 : Giới thiệu, cài đặt và cấu hình

Cảm ơn bạn đã đọc bài viết này!

Written by Võ Trần Anh Khoa