Đã đăng vào thg 6 18, 9:23 SA 4 phút đọc

Charles: Theo dõi yêu cầu và phản hồi API - Bí quyết phân tích và kiểm thử API một cách hiệu quả

Ở bài trước chúng ta đã biết được cách cài đặt và kết nối Charles. Ở bài viết này chúng ta cùng tìm hiểu cách sử dụng Charles để theo dõi các request, response của 1 API nhé.

Nếu bạn chưa có kiến thức cơ bản về API thì có thể đọc bài viết này để biết thêm nhé https://viblo.asia/p/tim-hieu-kien-thuc-co-ban-ve-api-maGK7A4Mlj2

1. Làm quen với giao diện của Charles

1.1. Layout

Charles cung cấp 2 layout dạng Structure và Sequences

Structure: các API cùng domain sẽ được Charles gom lại với nhau
Sequences: Các API sẽ được hiển thị tuần tự theo thứ tự chỉ định

Tuỳ theo nhu cầu mà các bạn có thể chọn loại giao diện phù hợp.

1.2. Các UI chính

Screenshot 2024-06-17 at 09.33.01.png

Trong hình vẽ trên:

Nút số 1 dùng để xoá các API đang có trong Charles.
Nút số 2 để tạm dừng/bắt đầu theo dõi API.
Vùng màu đỏ hiển thị danh sách các API đã theo dõi được.
Vùng màu vàng là thông tin chi tiết của API đang chọn.
Thanh Filter ở giữa 2 dùng để Fillter các API. Trong thực tế số lượng API có thể rất nhiều, bạn sẽ phải dùng nó thường xuyên

2. Cách xem thông tin của 1 API

Chú ý nếu Charles của bạn không hiển thị được như ảnh thì hãy xem phần lỗi thường gặp bên duới.

Bước 1: Chọn API cần xem thông tin

Screenshot 2024-06-17 at 09.48.57.png

Trong ảnh trên mình đã chọn API https://graph.facebook.com/v14.0/1609530656004384/activities, trong đó

Số 1 icon đại diện cho kiểu dữ liệu mà API trả về. Bạn sẽ thấy nhiều loại icon khác nhau tương ứng với từng loại data như: ảnh, video, json, text, js ....
Số 2 là HTTP status code mà API trả về
Số 3 là Method
Số 4 là Host
Số 5 là Path
Ngoài ra còn có các thông tin khác như: thời gian bắt đầu gọi, duration của API, kích thước của dữ liệu trả về...

Bước 2: Xem thông tin chi tiết

Chọn Content:

Screenshot 2024-06-17 at 09.49.10.png

Trong hình trên:

Phần màu vàng là thông tin của Request gửi lên, bao gồm: Header, Params, Body, .... Tuỳ từng loại API mà sẽ có cách thành phần khác nhau.
Phần màu hồng là thông tin của Response nhận được, bao gồm Header, Text, Raw, ... tương tự như Request, nó sẽ có các thành phần khác nhau tuỳ theo loại API.

3. Các lỗi thường gặp

3.1. Không thấy hiển thị request trên Charles

Khả năng cao lỗi này là do việc cài đặt Proxy trên điện thoại chưa chính xác, vui lòng kiểm tra lại IP address và Port.

Ngoài ra nếu điện thoại đang sử dụng VPN thì proxy cũng không hoạt động nên bạn cần phải tắt VPN đi nhé (đổi sang sử dụng VPN trên máy tính)

3.1. SSL Proxying not enabled for this host

Screenshot 2024-06-17 at 09.46.16.png

Nếu bạn thấy Charles báo lỗi như hình trên điều này có nghĩa là bạn chưa bật SSL Proxying cho URL này. Cách khắc phục là chọn Proxy -> SSL Proxying Setting...

Screenshot 2024-06-17 at 10.14.13.png

Sau đó chọn Add để thêm domain cần theo dõi Screenshot 2024-06-17 at 10.14.13.png

Screenshot 2024-06-17 at 10.17.41.png

Ở đây bạn điền Host của URL cần theo dõi, nếu bạn muốn theo dõi tất cả API thì có thể điền * vào mục Host, sau đó chọn OK

Chú ý nếu bạn điền thì có thể 1 số app và chức năng khác của điện thoại không hoạt động được (ví dụ In-App purchase), trong trường hợp đó bạn phải điền đúng URL cần theo dõi thôi nhé.