Tìm hiểu Charles và Fiddler Web Debugging

Charles/Fiddler là một web proxy (HTTP Proxy / HTTP Monitor) được chạy trên PC. Cho phép các web browsers của bạn được thiết lập để truy cập internet thông qua Charles, vì vậy Charles có thể bắt được các gói tin và hiển thị cho chúng ta tất cả dữ diệu gửi đi (request) và nhận (response). Vì vậy Charles là công cụ rất hữu ích cho việc debug cho Developer. Nếu QA chỉ có screenshots và video thì không thể nào thấy được những gì đang được gửi và nhận giữa web browsers và server. Nên việc lấy log Charles là rất cần thiết, giúp Dev có thể biết được những gì đang xảy ra và có thể chuẩn đoán và sửa chữa vấn đề dễ dàng hơn.

Một số chức năng chính của Charles

1. SSL Proxying – xem SSL requests and responses
2. Bandawidth Throttling – dùng để test với những đường truyền khác nhau
3. AJAX debugging – xem XML and JSON requests and responses theo dạng cây thư mục hoặc dạng text
4. Repeat requests to test back-end changes
5. Edit requests – để test nhiều inputs
6. Breakpoints để chỉnh sửa requests và responses

Một số chức năng chính của Fiddler

1. Web Debugging
2. Performance Testing
3. HTTP/HTTPS Traffic Recording
4. Web Session Manipulation
5. Security Testing
6. Customizing Fiddler

Trong bài viết này mình sẽ chỉ đề cập đến những chức năng QA hay dùng và hướng dẫn cách lấy log với Charles, phần Fiddler thì cách dùng cũng tưởng tự Charles nên mình chỉ đề cập đến Charles:

a. Config browsers

Để Charles có thể bắt được các gói tin từ trình duyệt thì đầu tiên mình phải config proxy của trình duyệt như sau:

Mở Charles, và bắt đầu truy cập internet từ trình duyệt, trên Charles chúng ta có thể thấy được thông tin của các gói tin:

b. Config devices

Để thiết lập device truy cập internet thông qua Charles, bạn phải mở Charles trên PC và trỏ device đến PC của bạn. Thiết lập IP của PC trên devices, port là 8888. Mỗi device sẽ có cách thiết lập khác nhau. Dưới đây là thiết lập trên iOS devices

Sau khi thiết lập thành công trên Charles sẽ thông báo có thiết bị truy cập, bạn chọn "Allow" để đồng ý cho phép truy cập

Bây giờ, devices của bạn sẽ truy cập internet thông qua Charles.

c. Get log

Việc của bạn sau khi làm lại tất cả steps thì get log và gửi cho Dev. Chọn File > Save sesion as > Chọn lưu file dưới format .chls

Để đảm bảo ứng dụng có thể chạy hoặc download app trong các điều kiện mạng nhất định, thì bạn cần kiểm tra trong nhiều tốc độ mạng khác nhau. Và Charles với chức năng Bandawidth throttling cho phép bạn thiết lập băng thông thích hợp để test. Chọn Proxy > Throttling Settings...> Bạn chọn Enable Throttling và lựa chọn gói mạng phù hợp để kiểm tra

Như các proxy khác, Charles có thể chặn một số truy cập với chức năng Back List.

Khi truy cập vào những trang nằm trong danh sách đen sẽ bị Charles từ chối

Trên đây là một vài hướng dẫn để có thể lấy được log của web trên PC và devices. Charles/Fiddler còn rất hữu ích cho việc Test Services, developing, tesing. Hy vọng bài viết có thể giúp ích cho mọi người.