Bật/tắt nhiều lớp phủ và tăng tốc độ di chuyển trong cây DOM bằng tài liệu tham khảo toàn diện về huy hiệu trong bảng điều khiển Phần tử.
Hiện hoặc ẩn huy hiệu
Cách hiện hoặc ẩn một số huy hiệu:
- Mở Công cụ cho nhà phát triển.
- Nhấp chuột phải vào một phần tử trong cây DOM rồi đánh dấu vào một hoặc nhiều huy hiệu trong trình đơn phụ Cài đặt huy hiệu.
Bảng điều khiển Phần tử cho thấy các huy hiệu đã chọn bên cạnh các phần tử thích hợp trong cây DOM. Các phần tiếp theo sẽ giải thích từng huy hiệu.
Xem nguồn
Huy hiệu view-source nằm bên cạnh thẻ <html> ở gốc trang HTML. Nhấp vào huy hiệu này để xem nguồn của trang trong bảng điều khiển Nguồn.
Huy hiệu này cung cấp một quy trình làm việc thay thế cho tuỳ chọn Xem nguồn trang trong trình đơn ngữ cảnh trang (nhấp chuột phải) của Chrome:
- Trong Chrome, hãy nhấp chuột phải vào một trang > Kiểm tra.
- Trong bảng điều khiển Phần tử, hãy nhấp vào huy hiệu
view-sourcebên cạnh thẻ<html>. - Kiểm tra nguồn trang trong bảng điều khiển Nguồn.
Lưới
Một phần tử HTML là vùng chứa lưới nếu thuộc tính CSS display được đặt thành grid hoặc inline-grid. Các phần tử như vậy có huy hiệu grid bên cạnh để bật/tắt các lớp phủ tương ứng.
Bật/tắt lớp phủ trên bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
gridbên cạnh phần tử rồi quan sát lớp phủ.
Lớp phủ cho thấy các cột, hàng, số và khoảng cách của chúng.
Để tìm hiểu cách gỡ lỗi bố cục lưới, hãy xem Kiểm tra lưới CSS.
Lưới con
Lưới con là một lưới lồng sử dụng cùng các đường lưới như lưới gốc. Một phần tử là vùng chứa lưới con nếu một hoặc cả hai thuộc tính grid-template-columns, grid-template-rows được đặt thành subgrid. Các phần tử như vậy có huy hiệu subgrid bên cạnh để bật/tắt các lớp phủ tương ứng.
Bật/tắt lớp phủ trên bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
subgridbên cạnh phần tử rồi quan sát lớp phủ.
Lớp phủ cho thấy các cột, hàng, số và khoảng cách của lưới con.
Gập
Một phần tử HTML là vùng chứa linh hoạt nếu thuộc tính CSS display được đặt thành flex hoặc inline-flex. Các phần tử như vậy có huy hiệu flex bên cạnh để bật/tắt các lớp phủ tương ứng.
Bật/tắt lớp phủ trên bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
flexbên cạnh phần tử rồi quan sát lớp phủ.
Lớp phủ cho thấy vị trí của phần tử con.
Để tìm hiểu cách gỡ lỗi bố cục linh hoạt, hãy xem bài viết Kiểm tra và gỡ lỗi hộp linh hoạt CSS.
Quảng cáo
Công cụ cho nhà phát triển có thể phát hiện một số khung quảng cáo và gắn thẻ các khung đó. Các khung như vậy có huy hiệu ad bên cạnh.
Khám phá một quảng cáo trong bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy tìm một phần tử có huy hiệu
adbên cạnh.
Bạn không thể nhấp vào huy hiệu ad, nhưng nếu di chuột qua huy hiệu này, bạn sẽ thấy một chú giải công cụ cung cấp thông tin ngữ cảnh về lý do phần tử được xác định là quảng cáo, chẳng hạn như:
- Hệ thống phân cấp tập lệnh: Những tập lệnh nào liên quan đến việc tạo phần tử.
- Quy tắc danh sách bộ lọc: Quy tắc cụ thể từ danh sách bộ lọc (ví dụ:
EasyList) khớp với phần tử hoặc tài nguyên mà phần tử đó đã tải.
Bạn cũng có thể sử dụng thẻ Kết xuất để làm nổi bật các khung quảng cáo bằng màu đỏ.
Cuộn
Một phần tử HTML là vùng chứa cuộn nếu thuộc tính CSS overflow được đặt thành scroll hoặc auto khi có đủ nội dung để gây tràn. Các phần tử như vậy có huy hiệu scroll bên cạnh.
Cuộn-chụp
Vùng chứa cuộn có thể có các thuộc tính CSS định cấu hình điểm chụp. Các phần tử như vậy có huy hiệu scroll-snap bên cạnh để bật/tắt các lớp phủ tương ứng.
Bật/tắt lớp phủ trên bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
scroll-snapbên cạnh phần tử. - Hãy thử cuộn phần tử sang phải và quan sát lớp phủ.
Lớp phủ cho thấy vị trí của phần tử và điểm chụp.
Vùng chứa
Một phần tử HTML là vùng chứa nếu phần tử đó có thuộc tính CSS container-type. Các phần tử như vậy có huy hiệu container bên cạnh để bật/tắt các lớp phủ tương ứng.
Bật/tắt lớp phủ trên bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
containerbên cạnh phần tử. - Hãy thử đổi kích thước phần tử bằng cách kéo góc dưới bên phải của phần tử đó rồi quan sát sự thay đổi bố cục và lớp phủ.
Lớp phủ cho thấy vị trí của phần tử con.
Để tìm hiểu cách gỡ lỗi truy vấn vùng chứa, hãy xem bài viết Kiểm tra và gỡ lỗi truy vấn vùng chứa CSS.
Khung giờ
Phần tử HTML <slot> là một phần giữ chỗ mà bạn có thể điền nội dung của riêng mình. Cùng với phần tử <template>, <slot> cho phép bạn tạo các cây DOM riêng biệt và trình bày chúng cùng nhau. Các phần tử nội dung vùng có slot huy hiệu bên cạnh đóng vai trò là đường liên kết đến các vùng tương ứng.
Khám phá huy hiệu slot trong bản xem trước sau:
- Kiểm tra phần tử trong bản xem trước.
- Trong cây DOM, hãy nhấp vào huy hiệu
slotbên cạnh phần tử để xác định vị trí của vùng tương ứng.
- Quay lại nội dung của vùng bằng cách nhấp vào huy hiệu
reveal.
Lớp trên cùng
Huy hiệu này giúp bạn hiểu khái niệm về lớp trên cùng và hình dung về lớp đó. Lớp trên cùng kết xuất nội dung ở trên cùng của tất cả các lớp khác, bất kể z-index. Khi bạn mở một <dialog> phần tử bằng phương thức .showModal(), trình duyệt sẽ đặt phần tử đó vào lớp trên cùng.
Để giúp bạn hình dung về các phần tử lớp trên cùng, bảng điều khiển Phần tử sẽ thêm vùng chứa #top-layer vào cây DOM sau thẻ </html> đóng.
Các phần tử lớp trên cùng có top-layer (N) huy hiệu bên cạnh, trong đó N là số chỉ mục của phần tử. Các huy hiệu là đường liên kết đến các phần tử tương ứng trong vùng chứa #top-layer.
Khám phá huy hiệu top-layer (N) trong bản xem trước sau:
- Trong bản xem trước, hãy nhấp vào Open dialog (Mở hộp thoại).
- Kiểm tra hộp thoại.
- Trong cây DOM, hãy nhấp vào huy hiệu
top-layer (1)bên cạnh phần tử<dialog>. Bảng điều khiển Phần tử sẽ đưa bạn đến phần tử tương ứng trong vùng chứa#top-layersau thẻ</html>đóng.
- Quay lại phần tử
<dialog>bằng cách nhấp vào huy hiệurevealbên cạnh phần tử hoặc::backdropcủa phần tử đó.
Nội dung nghe nhìn
Huy hiệu media được tắt theo mặc định. Khi bật, huy hiệu này sẽ xuất hiện bên cạnh các phần tử <audio> và <video>. Nhấp vào huy hiệu này để mở bảng điều khiển Nội dung nghe nhìn và gỡ lỗi nội dung nghe nhìn.
Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi trình phát nội dung nghe nhìn bằng bảng điều khiển Nội dung nghe nhìn.
Cửa sổ bật lên
Cửa sổ bật lên là bất kỳ phần tử nào có thuộc tính popover và hữu ích cho nhiều mẫu tương tác, bao gồm cả chú giải công cụ, cảnh báo, thông báo nhanh và nhiều mẫu khác. Các phần tử như vậy có huy hiệu popover bên cạnh.
Huy hiệu này bật/tắt huy hiệu top-layer bên cạnh, liên kết đến các phần tử tương ứng trong vùng chứa #top-layer.
Khám phá huy hiệu popover trong bản xem trước sau:
- Trong bản xem trước, hãy nhấp vào TOGGLE POPOVER (BẬT/TẮT CỬA SỔ BẬT LÊN).
- Kiểm tra cửa sổ bật lên xuất hiện.
Trong cây DOM, hãy nhấp vào huy hiệu
popoverbên cạnh phần tử<div popover>. Bảng điều khiển Phần tử cho bạn thấy huy hiệutop-layer.
Làm theo các bước trong phần Lớp trên cùng.
Để tìm hiểu thêm, hãy xem https://web.dev/learn/css/popover-and-dialog.
Kiểu bắt đầu
Quy tắc@starting-style xác định các kiểu ban đầu trên một phần tử trước khi phần tử đó được kết xuất trên trang. Điều này là bắt buộc đối với các phần tử tạo hiệu ứng động từ display: none, vì các phần tử này cần một trạng thái để tạo hiệu ứng động. Các phần tử như vậy có huy hiệu starting-style bên cạnh.
Huy hiệu này bật/tắt các kiểu trong quy tắc @starting-style, để bạn có thể thấy hiệu ứng động đang hoạt động.
Khám phá huy hiệu starting-style trong bản xem trước sau:
- Trong bản xem trước, hãy nhấp vào OPEN POPOVER (MỞ CỬA SỔ BẬT LÊN).
- Kiểm tra cửa sổ bật lên xuất hiện.
Trong cây DOM, hãy bật/tắt huy hiệu
starting-stylebên cạnh phần tử<div popover>.
Quan sát hiệu ứng động đang hoạt động và các kiểu đang được áp dụng trong thẻ Phần tử > Kiểu.
Để tìm hiểu thêm, hãy xem bài viết Tạo hiệu ứng động cho cửa sổ bật lên.