Giới thiệu công cụ FLEX để debug mọi thông tin ngay trên simulator hoặc thiết bị iOS

Chào các bạn hôm nay mình xin giới thiệu đến các bạn 1 tool dùng để debug mọi thông tin như cấu trúc, vị trí, thuộc tính của những đối tượng trong 1 màn hình, có thể xem system logs, network, caches, file browser... trực tiếp ngay trên simulator / thiết bị iOS, mà không cần dùng XCode. Khi bạn thiết lập tool này, bạn có thể biết được mọi hành vi mà người lập trình đang làm trên ứng dụng này mà không cần phải coi code.

Công cụ này có tên là FLEX ( là từ viết tắt của Flipboard Explorer). Công cụ này rất dễ cài đặt và sử dụng, bạn chỉ nên sử dụng tool này cho chế độ Debug thôi. Mình sẽ giới thiệu sơ qua những chức năng chính của tool này như sau:

1. Có thể thay đổi vị trí của đối tượng:

Hình bên dưới đây minh họa cách công cụ này có thể tương tác những đối tượng trên màn hình như chọn và thay đổi vị trí của đối tượng trên màn hình. Bạn bạn chạy simulator thì nhấn phím "f" để mở thanh công cụ hoặc có thể tạo 1 button là "FLEX" để hiển thị thanh công cụ lên (code hiển thị sẽ đề cập bên dưới) và thao tác như sau:

2. Xem thuộc tính và những biến ivar của đối tượng:

Bạn vào màn hình chính của FLEX, và chọn chức năng như UICatalog Classes, AppDelegate, UINavigationController, [UIApplication keyWindow]:

3. Thay đổi thuộc tính và biến ivar của đối tượng:

Ví dụ mình có thể thay đổi nội dung font, color của label.

4. Quản lý lịch sử khi sử dụng network:

Bạn dùng chức năng này để xem ứng dụng này đã tải về những file nào và dùng bao nhiêu dung lượng rồi.

5. Xem nội dung đã được in ra bằng NSLog:

6. Xem được những files trong thư mục của ứng dụng:

7. Xem dữ liệu caches:

8. Xem những đối tượng trong bộ nhớ Heap:

9. Xem những giá trị trong NSUserDefault:

10. Xem những thư viện trong system:

Ngoài ra còn nhiều chức năng khác nữa các bạn có thể sử dụng và khám phá thêm.

Cách cài đặt thư viện:

Bạn cài đặt FLEX chỉ thiết lập cho chế độ Debug và thông qua cocoapods như sau:

pod 'FLEX', '~> 2.0', :configurations => ['Debug']

FLEX bắt buộc iOS từ 7.0 trở lên.

Sau khi cài thư viện thành công, bạn vào phần build settings của project và nhấn nút "Add User-Defined Setting" để thêm đoạn config:

bạn thêm key "EXCLUDED_SOURCE_FILE_NAMES" với giá trị ở chế độ Release như "FLEX*":

Các bước thiết lập trên để khi build bản Release nó sẽ bỏ qua những file trong framework FLEX.

Cách sử dụng thư viện FLEX:

Nếu bạn muốn mở tool này trên device thì bắt buộc phải thiết lập 1 button để mở tool FLEX lên như những ví dụ ở trên thì để ở màn hình Home, nếu ứng dụng của bạn có màn hình setting thì có thể để trong đó cũng được.
Code gọi tool FLEX lên khá đơn giản như sau:

[[FLEXManager sharedManager] showExplorer];

Và khi viết code bạn nên để nó trong Macro của Debug như sau:

#if DEBUG
#import "FLEXManager.h"
#endif

...

- (void)handleSixFingerQuadrupleTap:(UITapGestureRecognizer *)tapRecognizer
{
#if DEBUG
    if (tapRecognizer.state == UIGestureRecognizerStateRecognized) {
        // This could also live in a handler for a keyboard shortcut, debug menu item, etc.
        [[FLEXManager sharedManager] showExplorer];
    }
#endif
}

Nếu ứng dụng của bạn viết bằng ngôn ngữ Swift thì phải vào màn hình build setting và tìm từ khóa "Swift Compiler", thêm giá trị "-D DEBUG" vào phần Debug như sau:

Nguồn tham khảo tại đây.

Nếu bạn chạy trên Simulator thì có những phím tắt để bạn có thể mở thanh công cụ lên một cách nhanh chóng như:
- Nhấn phím "?" để mở màn hình hướng dẫn các phím tắt.
- Nhấn phím "f" để mở/tắt thanh công cụ.
- Nhấn phím "g" để mở màn hình globals.
- Nhấn phím "m" để thực hiện hành động di chuyển đối tượng.
- Nhấn phím "n" để vào màn hình xem lịch sử network.
.... Các bạn có thể xem thêm tại màn hình shortcuts.

Bạn có thể tải ví dụ demo tại đây.