Tìm hiểu Charles và Fiddler Web Debugging
Bài đăng này đã không được cập nhật trong 3 năm
1. About Charles/Fiddler
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
- SSL Proxying – xem SSL requests and responses
- Bandwidth Throttling – dùng để test với những đường truyền khác nhau
- AJAX debugging – xem XML and JSON requests and responses theo dạng cây thư mục hoặc dạng text
- Repeat requests to test back-end changes
- Edit requests – để test nhiều inputs
- Breakpoints để chỉnh sửa requests và responses
Một số chức năng chính của Fiddler
- Web Debugging
- Performance Testing
- HTTP/HTTPS Traffic Recording
- Web Session Manipulation
- Security Testing
- 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:
2. Lấy log Web
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
3. Bandwidth throttling
Để đả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 Bandwidth 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
4. Black list Settings
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.
All rights reserved