Written by Nguyen Minh Tam
Nếu bạn là một mobile developer, mình khá chắc là bạn đã từng gặp qua tình huống éo le vỡ UI ít nhất một lần trong đời. Vỡ UI thường được bắt gặp khi mà bạn có một cái text, nội dung của cái text này được lấy bằng cách truy xuất database, hoặc từ kết quả mà API trả về. Cơ mà bạn lại quên mất việc kiểm tra UI khi nội dung cái text này dài ra trên các màn hình khác nhau, dẫn tới hậu quả UI của bạn banh chè.
Mục đích của bài viết này giúp các bạn làm quen với một tool rất chy là bá đạo, cân từ debugging đến testing.
Ví dụ nhé, nó giúp bạn có thể test các hiển thị lên UI của nhiều data set khác nhau như thế nào, ngay cả khi bạn chưa implement API. Trong một diễn biến khác, nó có thể giúp bạn debugging cách bạn call API đã đúng chưa: kiểm tra bạn đang gọi GET/POST/..., header ra sao, parameter như nào,... Ngoài ra nó còn cho phép bạn test những trường hợp download mạng chậm nữa.
Và cái tool thần thánh được nhắc đến trong bài viết này chính là Charles - Web Debugging Proxy Application.
Note: Các ví dụ mình đề cập trong bài viết này là những kinh nghiệm mình có được khi trong implement app trên iOS. Mình nghĩ về cơ bản thì develop Android và iOS khá giống nhau, nên chắc tài liệu này cũng có chút hữu ích với với các bạn Android developer.
Để cài đặt Charles cần:
- Truy cập vào đường link https://www.charlesproxy.com và download file installer về máy.
- Khởi động installer đã down về, hoàn thành theo chỉ dẫn:
- Khởi động Charles:
- Gói Charles free cho 30 ngày, vào đây để mua license nhé. Sau đó thì đi tới Help > Register Charles... > Điền Register Name và License Key để đăng ký rồi restart lại Charles.
Phần set up Charles và môi trường là phần vô cùng quan trọng. Nếu bạn set up môi trường không đúng hoặc không đầy đủ, điều tất yếu là bạn sẽ chả thể làm việc được với nó.
Để giúp bạn có thể kiểm tra liệu mình đã set up đúng chưa, thì sau đây là checklist các bước mình sử dụng:
- Config Proxy
- Bật macOS Proxy cho Charles
- Config proxy cho device
- Config Configuring SSL Proxying Certificates
- Thêm Charles CA Certificate cho máy mac
- Bật SSL Proxy cho máy mac và cài đặt SSL cho tất cả host name
- Bật trust SSL Certìicate cho device/simulator
Proxy là một Internet server làm nhiệm vụ chuyển tiếp thông tin và kiểm soát tạo sự an toàn cho việc truy cập Internet của các máy client.
Khi sử dụng Charles trên máy Mac, bạn cần config cho Charles sử dụng macOS Proxy.
Lần đầu sử dụng Charles bạn sẽ được tự động hỏi về việc cấp quyền macOS Proxy như sau. Chọn Grant Privileges và nhập user name và password:
Sau khi enable macOS Proxy cho Charles, dấu tick sẽ xuất hiện bên cạnh mục View > macOS Proxy như thế này:
Nếu bước trên bạn chọn Not yet trong lúc cài đặt Automatic macOS Proxy Configuration, lần tới bạn có thế cài đặt thông qua View > Proxy Settings....
Khi bạn chọn debug app của bạn trên real device cùng với Charles, bạn cần phải trỏ HTTP Proxy của device đến máy tính mà bạn đang sử dụng.
Lưu ý: Máy tính và điện thoại của bạn phải xài cùng wifi.
Config cho device như sau:
- Vào Settings > Wifi.
- Chọn network đang kết nối tới.
- Chọn Config Proxy.
- Chọn Manual và điền vào form, trong đó:
- Server: Địa chỉ IP của máy tính đang chạy Charles
- Port: Cổng mà Charles chạy (thường là 8888)
- Authentication: Off
Để biết local IP của máy tính, vào Help > Local IP Address.
Tiếp tục, config access control cho máy mac như sau:
- Vào Proxy > Access Control Settings… để cho phép các device được phép kết nối với Charles bằng cách thêm mới.
Lưu ý: Sau khi testing và debug trên device xong, nhớ setting lại wifi của device, bằng cách vào Setting > Wifi, chọn wifi sử dụng, chọn Config Proxy > Off. Nếu không làm vậy thì điện thoại của bạn không xài wifi được đâu.
Simulator đã sử dụng system proxy, nên không cần phải config proxy cho simulator nữa. Nếu simulator vẫn gặp trục trặc, hãy khởi động lại simulator.
Charles có thể được sử dụng như một HTTPS proxy ở giữa, cho phép bạn đọc dữ liệu giao tiếp giữa web browser và SSL web server. Thay vì browser sẽ đọc certificate của server, Charles lúc này sẽ tạo một certificate cho server và xác thực bằng chính root certificate của nó (Charles CA Certificate). Charles nhận certificate của server trong khi browser của bạn nhận certificate của Charles. Vậy nên bạn sẽ nhận được thông báo bảo mật nói rằng the root authority is not trusted. Thông báo này sẽ không xuất hiện nữa nếu bạn đã thêm Charles CA Certificate vào trusted certificates.
- Vào Help > SSL Proxying > Install Charles Root Certificates.
- Thêm Certificates.
- Chọn Charles Proxy CA.
- Chọn Always Trust.
- Kết quả sẽ được như sau.
Tiếp theo, bạn cần xác định những host name mà bạn muốn bật SSL proxy. Với mình thì mình bật cho tất cả các host name.
- Proxy > SSL Proxying Settings...
- Ở tab SSL Proxying, chọn Enable SSL Proxying.
- Thêm Location.
- Khởi động lại browser đang sử dụng (Safari/Chrome/...) để áp dụng thay đổi.
Vì kể từ lúc này Charles sẽ tự tạo certificate của chính nó, được xác thực bằng Charles Root Certificate, nên khi bạn test hoặc debug trên device/simulator, bạn sẽ nhận được cảnh báo Charles Root Certificate không thuộc trong list trusted root certificate của device/simulator. Đó là lý do ta cài đặt Charles’s Root Certificate và bật Certificate Trust.
Đối với iOS Device
- Thực hiện cài đặt iOS device sử dụng Charles proxy như trong mục Config proxy cho iOS Device
- Mở Safari và truy cập tới https://chls.pro/ssl và chọn
InstallSSL certificate. - Tiếp tục vào Settings > General > About > Certificate Trust Settings.
- Dưới mục Enable full trust for root certificates, bật cetificate cho Charles Proxy.
Đối với iOS Simulator
- Cài cho tất cả các simulator:
- Tắt tất cả simulator
- Trên Charles, vào Help > SSL Proxying > Install Charles Root Certificate in iOS Simulators.
- Cách trên đôi khi không thành công. Ta có thể thực hiện cài cho simulator bạn cần dùng như sau:
- Vào Help > SSL Proxying > Save Charles Root Certificate… để lưu file *.pem ra Desktop.
- Kéo thả file *.pem vừa tạo vào simulator.
- Thực hiện cài đặt certificate cho simulator.
- Bật trust certificate cho simulator bằng cách:
- Vào Settings > General > About > Certificate Trust Settings.
- Dưới mục Enable full trust for root certificates, bật cetificate cho Charles Proxy.
Nhắc lại checklist lần nữa để các bạn không quên:
- Config Proxy
- Bật macOS Proxy cho Charles
- Config proxy cho device
- Config Configuring SSL Proxying Certificates
- Thêm Charles CA Certificate cho máy mac
- Bật SSL Proxy cho máy mac và cài đặt SSL cho tất cả host name
- Bật trust SSL Certificate cho device/simulator
Phía trên là các bước cài đặt môi trường làm việc cùng Charles. Hi vọng mọi người đã biết được một vài kiến thức hữu ích khi đọc tài liệu này. Ủng hộ mình một ⭐️ để có thêm động lực viết bài nhé! Cảm ơn mọi người. 🎉
Đọc tiếp Hướng dẫn sử dụng Charles 🗒
Đọc tiếp Demo debugging an iOS app with dummy data from Charles 🐞
Quay lại Charles Guide 