0

KIỂM THỬ API VỚI CHARLES - PHẦN 2 - BREAKPOINT đơn giản nhất

Với Breakpoint, bạn có thể chặn API để sửa Request và Response.

Tình huống đơn giản nhất mà tôi đang áp dụng với breakpoint là sửa đổi giá trị của yêu cầu hoặc phản hồi để xem liệu quá trinhd xử lý giao diện có như mong đợi trong những trường hợp cụ thể hay không?

Đầu tiên cần kết nối Charles và device, các bạn có thể xem hướng dẫn cụ thể trong bài viết trước của mình: Hướng dẫn cài đật và kết nối charles

Bước 1: Đầu tiên cần xác định URL của API có element bạn cần chỉnh suwaar thông tin là gì.

Hình 1: Xác định element muốn sửa

Trong ví dụ này, mình sẽ chỉnh sửa thông tin text ở button đầu tiên.

Khi mở đến màn hình này, app sẽ gọi đến API v1.0/pickup

Khic lick vào value của trường URL như Hình 2, sẽ có cửa sổ khác mở ra. Tại đây sẽ cho phép bạn copy URL cho chính xác của API đâng gọi.

Hình 2: Xác định URL chính xác

Bước 2: Breakpoint settings

Tiếp theo, bạn chọn Proxy > Breakpoint Settings như Hình 3

Hình 3: Proxy > Breakpoint Settings

Cửa sổ Breakpoint Settings sẽ xuất hiện như Hình 4, tại đây, bạn thực hiện theo các bước để setting các thông số nhé
Enable breakpoints > Add URL setting > Nhập thông tin breakpoint > OK. Hoặc đơn giản, bạn chỉ cần paste chính xác URL API ở Hình 2 vào trường Host ở modal Edit break point và OK, charles sẽ tự động fill các trường còn lại trong modal này.

Hình 4: Breakpoint settings

Bước Enable breakpoints, bạn có thể tùy chọn enable/ disable ở màn hình chính bằng biểu tượng ở chỗ mũi tên như hình dưới:

Hình 5: Enable/ disable breakpoints

Tại modal Edit Breakpoint, bạn click chọn Request nếu muốn chặn request, chọn Response nếu muốn chặn response. Có thế chọn cả Reqquest và Response nếu muốn chặn cả 2. Khi đó API sẽ được đưa vào list API của Breakpoint như Hình 6:

Hình 6: Danh sách API được breakpoint

Sau các bước dài dòng từ Hình 2 đến Hình 5 thì bạn có thể thao tác nhanh breakpoint setting bằng cách click chuột phải tại URL > Breakpoints

Hình 7: Breakpoint setting nhanh

Bước 3: Edit response

Giờ đây, hãy quay trở lại app và chạy lại đến màn hình có API mà bạn muốn breakpoint. Khi gọi đến API đó, màn hình bên dưới sẽ được hiện ra. Ở đây, mình sẽ thực hiện Edit response.

Sau khi chọn tab Edit Response, sẽ có nhiều định dạng để xem phần response trả về, ở đây, mình sẽ chọn định dạng JSON Text để có thể xem đc cụ thể các element trả về là gì.

Hình 8: Tìm element cần chỉnh sửa trong response trả về

Giá trị mà mình muốn sửa ở Hình 1 tương ứng với elemetn race_name_short. Bạn click vào element và thay đối sang một giá trị khác mà mình mong muốn, sau đó click Execute để thực thi.

Lúc này trên màn hình app sẽ hiển thị những thông tin theo phần Response mà mình đã thay đổi như Hình 9:

Hình 9: Màn hình app sau khi Edit response

Vậy là ở Phần 2 này, mình đã hướng dấn các bạn cách breakpoint cho Response. Ở phần 3, mình sẽ chia sẻ 1 kiến thức cũng khá giống với Breakpoint đó là Rewrite. Nếu thấy bài viết bổ ích, hay upvote hoặc có điều gì còn thắc mắc, vui lòng để lại comment để mình cải thiện ở bài viết lần sau nhé. ❤️


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.