Bảng điều khiển Lớp giúp bạn hiểu rõ thành phần của trang web và cách trình duyệt hiển thị nội dung. Phân tích sơ đồ 3D của trang web để xác định các vấn đề về kết xuất, khắc phục lỗi cuộn và tối ưu hoá ảnh động.
Tổng quan
Sử dụng bảng điều khiển Layers (Lớp) để thực hiện những việc sau:
- Xem các lớp tài liệu.
- Kiểm tra các lớp tài liệu.
- Đặt điểm ngắt thay đổi DOM.
- Xem thông tin về Trình phân tích tài nguyên vẽ.
- Xác định các thành phần cuộn chậm.
Mở bảng điều khiển Lớp
Để mở bảng điều khiển Layers (Lớp), hãy làm theo các bước sau:
- Mở Công cụ cho nhà phát triển.
- Mở trình đơn Command (Lệnh) bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Ctrl+Shift+P
- Bắt đầu nhập
Layers, chọn Show Layers panel (Hiển thị bảng điều khiển Layers (Lớp)) rồi nhấn phím Enter.
Ngoài ra, ở góc trên cùng bên phải, hãy chọn biểu tượng more_vert Tuỳ chọn khác > Công cụ khác > Bảng điều khiển Lớp.
Ngoài ra, bảng điều khiển Hiệu suất cho phép bạn xem các lớp của từng khung trong bản ghi trong thẻ Lớp. Để tìm hiểu thêm, hãy xem phần Xem thông tin về lớp.
Xem các lớp tài liệu
Phần ở ngoài cùng bên trái của bảng điều khiển Layers (Lớp) liệt kê tất cả các lớp đã kết xuất của tài liệu trong một cây có thể mở rộng. Cây này sẽ cập nhật khi bạn di chuyển trên trang. Các lớp được xác định bằng bộ chọn CSS hoặc bằng một số, theo sau là kích thước của lớp tính bằng pixel.
Di chuột qua một lớp để làm nổi bật lớp đó trên trang web và trong sơ đồ. Một chú giải công cụ sẽ xuất hiện trên trang với thông tin sau:
- Bộ chọn của lớp.
- Kích thước của lớp, tính bằng pixel.
- Biểu tượng đại diện cho lưới CSS hoặc flex (nếu có).
Kiểm tra các lớp tài liệu
Nhấp vào một lớp để xem thêm thông tin trong ngăn Details (Chi tiết).
Tuỳ thuộc vào lớp, thông tin sau sẽ xuất hiện:
- Kích thước
- Lý do kết hợp
- Bộ nhớ ước tính
- Số lần sơn
- Khu vực cuộn chậm
- Quy tắc ràng buộc vị trí cố định
Sơ đồ này cho thấy cách các lớp được xếp chồng và sắp xếp cho trang này, bao gồm cả các phần tử được đặt bên ngoài khung nhìn.
Cách di chuyển sơ đồ:
- Sử dụng WASD để di chuyển sơ đồ. Nhấn phím W để di chuyển lên, A để di chuyển sang trái, S để di chuyển xuống và D để di chuyển sang phải.
- Nhấp vào Chế độ kéo drag_pan hoặc nhấn X rồi kéo để di chuyển dọc theo trục X và Y.
- Nhấp vào biểu tượng Chế độ xoay 360 hoặc nhấn phím V rồi kéo để xoay theo trục Z.
- Nhấp vào biểu tượng Đặt lại phép biến đổi zoom_in_map hoặc nhấn phím 0 để đặt lại sơ đồ về vị trí ban đầu.
- Phóng to bằng cách nhấn tổ hợp phím shift + + hoặc con lăn chuột lên.
- Thu nhỏ bằng cách nhấn tổ hợp phím shift + - hoặc con lăn chuột xuống.
Để xem phần tử DOM tương ứng của một lớp trong bảng điều khiển Phần tử, hãy nhấp chuột phải vào một lớp trong biểu đồ hoặc trên cây lớp rồi nhấp vào Hiện trong bảng điều khiển Phần tử.
Ngoài ra, bảng điều khiển Layers (Lớp) sẽ ẩn một số lớp nhất định không lưu trữ hoặc vẽ nội dung. Để hiển thị các lớp này, hãy nhấp chuột phải vào cây lớp rồi chọn Hiện các lớp bên trong.
Đặt điểm ngắt thay đổi DOM
Bảng điều khiển Layers (Lớp) cho phép bạn đặt điểm ngắt thay đổi DOM.
Để đặt điểm ngắt thay đổi DOM, hãy làm theo các bước sau:
- Nhấp chuột phải vào một lớp trong cây phân lớp.
- Di chuột qua Break on (Ngừng trên), sau đó chọn Subtree modifications (Sửa đổi cây con), Attribute modifications (Sửa đổi thuộc tính) hoặc Node removal (Xoá nút).
Tìm danh sách điểm ngắt thay đổi DOM trong:
- Elements (Phần tử) > thẻ DOM Breakpoints (Điểm ngắt DOM).
- Sources (Nguồn) > DOM Breakpoints (Điểm ngắt DOM) – phần có thể thu gọn.
Để tìm hiểu thêm về các loại điểm ngắt, hãy xem phần Các loại điểm ngắt thay đổi DOM.
Xem thông tin về Trình phân tích tài nguyên vẽ
Bảng điều khiển Layers (Lớp) cho phép bạn xem thông tin chi tiết về lớp sơn và hiển thị nội dung của trang web lên sơ đồ 3D.
Để kích hoạt Paint Profiler (Trình phân tích vẽ), hãy làm theo các bước sau:
- Đánh dấu vào hộp đánh dấu check_box Paints (Hộp đánh dấu) trong thanh thao tác.
- Chọn một lớp trong cây lớp.
- Nhấp vào Paint Profiler (Trình phân tích tài nguyên vẽ) ở cuối ngăn Details (Chi tiết). Xin lưu ý rằng không phải lớp nào cũng có tuỳ chọn này.
Thẻ Profiler (Trình phân tích tài nguyên) sẽ mở ra với các bản ghi vẽ và biểu đồ thể hiện mức phân bổ chi phí vẽ.
Việc kích hoạt Paints (Bảng vẽ) cũng sẽ hiển thị hầu hết nội dung của trang web lên sơ đồ.
Xác định các thành phần cuộn chậm
Một số trang web sử dụng JavaScript để phát hiện sự kiện cuộn hoặc chạm trên các phần tử theo cách có thể ảnh hưởng tiêu cực đến tốc độ cuộn. Để xác định các lớp chứa trình nghe sự kiện liên quan đến thao tác cuộn có thể làm giảm hiệu suất, hãy nhấp vào hộp đánh dấu check_box Slow scroll rects (Cuộn chậm).
Các lớp có thể khiến thao tác cuộn bị chậm được đánh dấu màu hồng.