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) để làm như 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 của Trình phân tích tài nguyên vẽ.
- Xác định các phần tử cuộn chậm.
Mở bảng điều khiển Lớp
Để mở bảng điều khiển 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: Control+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 mỗi khung hình của 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. 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 để đánh dấu 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 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 đối với 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 biểu đồ:
- 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 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 thị trong bảng điều khiển Phần tử.
Ngoài ra, bảng điều khiển 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 và chọn Hiển thị 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 các đ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 lớp.
- Di chuột lên mục Ngắt kết nối rồi chọn Sửa đổi cây con, Sửa đổi thuộc tính hoặc Xoá nút.
Tìm danh sách các điểm ngắt thay đổi DOM trong:
- Elements (Phần tử) > thẻ DOM Breakpoints (Điểm ngắt DOM).
- Nguồn > Mục có thể thu gọn Điểm ngắt DOM.
Để 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 của 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 trê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 check_box Sơn 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ể cản trở hiệu suất, hãy nhấp vào hộp đánh dấu check_box Slow scroll rects (Hình chữ nhật cuộn chậm).
Các lớp có thể khiến cuộn chậm được đánh dấu bằng màu hồng.