View and View Controller Debugging

Bài đăng này đã không được cập nhật trong 5 năm

Hôm nay mình sẽ giới thiệu view debug được tích hợp trong Xcode.Trước tiên các bạn tải source code: https://github.com/lehuudungle/CloudyDemo

1. Exploring the View Debugger

Hãy mở project Clody example. Cloudy lấy data từ Dark Sky API and sẽ show cho người dùng thấy thời tiết hiện tại và và các ngày tiếp theo.

Run Cloudy trong simulator và click vào Debug View Hierarchy hoặc trên navigation các bạn chọn :

Ngoài ra còn có một tuỳ chọn ít được biết đến để gỡ lỗi phân cấp khung nhìn của ứng dụng .Các bạn cho tạm dừng ứng dụng , mở class RootViewControll.swift và thêm breakpoint trên dòng 152. Chạy lại ứng dụng , ứng dụng bị gián đoạn tại điểm breakpoint dòng 152(Nghĩa là phần giao diện chỉ hiển thị đến dòng này bị dừng lại).Mở Debug Navigator bên trái, click menu View process in different ways và select View UI Hierarchy.

2. Debug Navigator

Debug Navigator sẽ hiển thị danh sách các phân cấp của cấu trúc phân cấp chế độ xem. Nó sẽ hiển thị các mối quan hệ giữa các khung nhìn trong hệ thống phân cấp và sẽ hiển thị view controller nào quản lý view nào.

Khi nhìn vào hệ thống phân cấp của bộ điều khiển các bạn sẽ nhìn thấy ngay lớp RootViewController chứa 2 bộ điều khiển con đó là lớp DayViewController và 1 lớp WeakViewController.

Thanh bộ loc ở dưới cùng của hệ thống phân cấp chế độ xem là một công cụ thuận tiện để tìm chế độ xem( tìm 1 UILabel, 1 Button ...).Bộ lọc văn bản cho phép bạn lọc phân cấp chế độ xem dựa trên một số tiêu chí, bao gồm tên lớp , text của label hoặc button, thậm chí các địa chỉ ô nhớ của đối tượng.

Các nút bên phải của bộ lọc văn bản được bật theo mặc định. Khi nút Show primary views được bật sẽ ẩn chế độ xem là chế độ xem của hệ thống. Ví dụ: Một UIButton quản lý một thể hiện UILabel để hiển thị tiêu đề của button, Khi click nút Show primary views thì UILabel đó sẽ bị ẩn trong cấu trúc phân cấp chế độ .

Nút kế bên là nút Show only displayed views được bật thì các view đang được set IsHiden sẽ bị ẩn đi , nếu bỏ click Show only displayed views thì các view đang được set isHiden là true sẽ được hiển thị trên chế độ xem(Như hình dưới thì activity indicator view được hiện lên)

3.Main Window

Main window Xcode sẽ show trung tâm của trình gỡ lỗi chế độ xem, hiển thị 2 hoặc 3 chiều không gian của hệ thống phân cấp. Chúng ta có thể xoay cấu trúc phân cấp khung nhìn để thay đổi góc và các view controller ở dưới của main window.

Với thanh trượt bên trái: chúng ta có thể điều chỉnh khoảng cách giữa các chế độ xem của hệ thống phân cấp. Điều này rất hữu ích nếu bạn đang làm việc với hệ thống phân cấp phức tạp với hàng chục hoặc hàng trăm view.

Show Clipped Content: Sẽ hiển các view bị cắt của ô xem bảng. Ví dụ: Khi click vào Show Clipped Content Thì title “January 20” ở ngoài khung nhìn của màn hình device sẽ được hiển thị.
Show Constraints: Sẽ show contraints của 1 view bất kỳ các bạn double click vào view cần xem.

Adjust the view model: mặc định nó sẽ ở chế độ Wireframes and Contents. Nó có 3 chế độ: Contents, Wireframes, and Wireframes and Contents. Nhưng phần lớn khi debug view chúng ta muốn xem cả phần khung và cả content.
Orient to 2D/3D: bạn có thể chuyển đổi 2 chiều hoặc 3 chiều của chế độ xem phân cấp. chế độ 3d thường được sử dụng nhiều hơn nhưng đôi khi có thể dễ dàng gỡ lỗi hơn với chế độ 2d. Ví dụ: để kiểm tra liên kết của một số chế độ xem.

Tiếp theo là 3 nút: -, =, +: Đấy là các nút để phóng to, thu nhỏ chế độ xem.

Tranh trượt bên phải: được sử dụng để tập trung vào một tập hợp con của hệ thống phân cấp chế độ xem. Điều này rất hữu ích nếu bạn đang làm việc với hệ thống phân cấp phức tạp và muốn bỏ qua chế độ xem mà bạn không quan tâm.

Có cách thuận tiện hơn để bạn tập trung vào 1 tập hợp con của hệ thống phân cấp chế độ xem( 1 view cụ thể, 1 label cụ thể) bằng cách Double Click phần tử đó .

Để quay về bao quát toàn view của hệ thống bạn click nút Unfocus trong Debug Navigator ở bên trái.

Nhấn chuột phải vào 1 view trong cửa sổ chính bạn có thể in ra phần mô tả của view đó trên console giống hệt lệnh “po” của LLDB. Trong dự án ,khi mình làm 1 cái task về UI, một người bạn của mình đã chỉ cho mình cách này, nó giúp mình xem thông tin của frame đó là bao nhiêu , cái này khá hữu ích.

Ngoài ra của có 1 số tuỳ chọn như là Hide Views in Front hoặc Hide Views Behind.

Giả sử khi bạn chọn 1 label trong chế độ xem chính , bạn có để ấn tổ hợp phím Shift+Command+D để xem phần tử đó trong hệ thống phân cấp của Debug Navigator.

4.Object and Size Inspectors

Khi bạn chọn 1 view bất kỳ trên cửa sổ chính, và click vào “Show the Object Inspectors ” sẽ cho bạn thấy 1 loạt các thông tin của phần tử đó. Nếu bạn chọn view UITableViewCell trên cửa sổ chính mà view này được custom từ 1 class thì bạn có thể điều hướng đến đoạn class custom view này.

Các thông tin được hiển thị trong Object Inspector rất thuận tiện để có cái nhìn tổng quát nhanh về các các thuộc tính của 1 thành phần, rất hữu ích để gỡ lỗi các vấn đề giao diện.

Object Inspector cũng rất thuận tiện cho việc gỡ view controller . Nếu bạn chon 1 view controller sẽ cho các bạn trình điều khiển khung nhìn cha và con của nó.

5. Size inspector

Phần Size inspector tóm tắt các layout attributes của 1 view được chọn cũng như frame, bounds và constraints.Một List các contrains đặc biệt hữu ích để debug các vấn đề liên quan đến Auto layout.