Hướng Dẫn Sử Dụng Charles Để Theo Dõi Yêu Cầu và Phản Hồi API

Trong bài viết trước, chúng ta đã tìm hiểu về cách cài đặt và kết nối Charles. Bài viết này sẽ hướng dẫn bạn cách sử dụng Charles để theo dõi các yêu cầu (request) và phản hồi (response) của API một cách hiệu quả.

Nếu bạn chưa có kiến thức cơ bản về API, hãy tham khảo bài viết này để biết thêm: Tìm Hiểu Kiến Thức Cơ Bản Về API

1. Làm Quen Với Giao Diện Của Charles

1.1. Các Layout Của Charles

Charles hỗ trợ hai loại giao diện khác nhau: Structure và Sequences.

• Structure: Gom lại các API cùng domain.
• Sequences: Hiển thị các API theo thứ tự tuần tự.

Tuỳ theo nhu cầu sử dụng, bạn có thể chọn layout phù hợp.

1.2. Các Thành Phần Giao Diện Chính

• Nút 1: Xóa các API hiện có trong Charles.
• Nút 2: Tạm dừng hoặc bắt đầu theo dõi API.
• Vùng màu đỏ: Danh sách các API đã theo dõi.
• Vùng màu vàng: Thông tin chi tiết của API đang chọn.
• Thanh Filter: Dùng để lọc các API, rất hữu ích khi số lượng API nhiều.

2. Cách Xem Thông Tin Của Một API

Lưu ý: Nếu Charles không hiển thị như mong muốn, hãy tham khảo phần lỗi thường gặp phía dưới.

Bước 1: Chọn API Cần Xem Thông Tin

Ví dụ, khi chọn API https://graph.facebook.com/v14.0/1609530656004384/activities, bạn sẽ thấy:

• Số 1: Icon đại diện cho kiểu dữ liệu trả về (ảnh, video, JSON, văn bản...).
• Số 2: Mã trạng thái HTTP (HTTP status code) mà API phản hồi.
• Số 3: Phương thức (Method).
• Số 4: Host.
• Số 5: Path.
• Cùng với các thông tin khác như thời gian bắt đầu gọi, thời gian xử lý (duration) và kích thước của dữ liệu trả về.

Bước 2: Xem Thông Tin Chi Tiết

Chọn Content:

• Phần màu vàng: Thông tin Request gửi lên, bao gồm: Header, Params, Body,... Tùy từng loại API mà các thành phần có thể khác nhau.
• Phần màu hồng: Thông tin Response nhận được, với Header, Text, Raw,... cũng sẽ khác nhau dựa trên loại API.

3. Các Lỗi Thường Gặp

3.1. Không Thấy Yêu Cầu Trên Charles

Lỗi này có thể do cài đặt Proxy trên điện thoại chưa chính xác. Hãy kiểm tra lại địa chỉ IP và Port.
Ngoài ra, nếu điện thoại đang sử dụng VPN, hãy tắt VPN vì proxy có thể không hoạt động.

3.2. Lỗi SSL Proxying Not Enabled For This Host

Nếu bạn thấy thông báo này, có thể bạn chưa bật SSL Proxying cho URL cần theo dõi. Để sửa lỗi này, bạn cần:
Chọn Proxy -> SSL Proxying Setting..., sau đó thêm domain cần theo dõi. Bạn có thể nhập * để theo dõi tất cả API, nhưng điều này có thể ảnh hưởng đến một số ứng dụng.

3.3. Trust Charles Root Certificate

Lỗi này có thể do:

• Nguyên nhân 1: Điện thoại chưa cài đặt và tin cậy chứng chỉ. Xem hướng dẫn cài đặt tại bài viết Khám Phá Siêu Công Cụ Charles.
• Nguyên nhân 2: Máy tính chưa cài đặt và tin cậy chứng chỉ của Charles. Hãy cài đặt và tin cậy chứng chỉ lên máy tính.

Sau khi thực hiện các bước trên, hãy thử mở lại ứng dụng để kiểm tra xem API đã hiển thị thông tin hay chưa.
source: viblo