Tài liệu tham khảo về huy hiệu

Bật/tắt nhiều lớp phủ và tăng tốc điều hướng 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 Elements (Phần tử).

Hiện hoặc ẩn huy hiệu

Cách hiện hoặc ẩn huy hiệu:

1. Mở Công cụ cho nhà phát triển.
2. Nhấp chuột phải vào một phần tử trong cây DOM và chọn Huy hiệu settings....
3. Chọn hoặc bỏ chọn hộp đánh dấu bên cạnh huy hiệu đã chọn.

Bảng điều khiển Phần tử hiển thị 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.

Lưới

Phần tử HTML là vùng chứa lưới nếu thuộc tính CSS display của phần tử đó đượ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 chế độ xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu grid bên cạnh phần tử và quan sát lớp phủ.

Lớp phủ hiển thị các cột, hàng, số và khoảng trống.

Để tìm hiểu cách gỡ lỗi bố cục lưới, hãy xem bài viết Kiểm tra lưới CSS.

Lưới phụ

Lưới con là một lưới lồng nhau sử dụng cùng một kênh với lưới mẹ. Một phần tử là vùng chứa lưới phụ nếu một hoặc cả hai thuộc tính grid-template-columns, grid-template-rows của phần tử đó đượ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 chế độ xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu subgrid bên cạnh phần tử đó rồi quan sát lớp phủ.

Lớp phủ hiển thị các cột, hàng, số lượng và khoảng trống của một lưới con.

Gập

Một phần tử HTML là vùng chứa flex nếu thuộc tính CSS display của phần tử đó đượ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 lớp phủ tương ứng.

Bật/tắt lớp phủ trên chế độ xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu flex bên cạnh phần tử đó rồi quan sát lớp phủ.

Lớp phủ hiển thị 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ụ dành cho nhà phát triển có thể phát hiện một số khung quảng cáo và gắn thẻ cho các khung đó. Những 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:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy tìm một phần tử có huy hiệu ad bên cạnh.

Huy hiệu ad không thể nhấp vào, nhưng bạn có thể sử dụng thẻ Hiển thị để đánh dấu các khung quảng cáo màu đỏ.

Di chuyển chuột

Một phần tử HTML là vùng chứa cuộn nếu thuộc tính CSS overflow của phần tử đó được đặt thành scroll hoặc auto khi có đủ nội dung để gây ra tình trạng tràn. Vùng chứa cuộn có thể có thuộc tính CSS định cấu hình điểm chụp nhanh. Các phần tử như vậy có huy hiệu scroll-snap bên cạnh để bật/tắt lớp phủ tương ứng.

Bật/tắt lớp phủ trên chế độ xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu scroll-snap bên cạnh phần tử đó.
3. Hãy thử cuộn phần tử sang phải rồi quan sát lớp phủ.

Lớp phủ hiển thị vị trí của phần tử và điểm chụp nhanh.

Vùng chứa

Một phần tử HTML là một 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 chế độ xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu container bên cạnh phần tử.
3. Thử đổi kích thước phần tử bằng cách kéo góc dưới cùng bên phải 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 các truy vấn vùng chứa, hãy xem Kiểm tra và gỡ lỗi truy vấn vùng chứa CSS.

Vùng

Phần tử HTML <slot> là một phần giữ chỗ mà bạn có thể điền bằng 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 ô trống có huy hiệu ink_selectionslot bên cạnh. Các huy hiệu này được coi là đường liên kết đến các ô tương ứng.

Khám phá huy hiệu ink_selectionslot trong bản xem trước sau đây:

1. Kiểm tra phần tử trong bản xem trước.
2. Trong cây DOM, hãy nhấp vào huy hiệu ink_selectionslot bên cạnh phần tử để tìm vị trí khe tương ứng.
3. Quay lại nội dung của ô bằng cách nhấp vào huy hiệu ink_selectionreveal.

Lớp trên cùng

Huy hiệu này giúp bạn hiểu rõ khái niệm về lớp trên cùng và trực quan hoá nó. Lớp trên cùng hiển thị nội dung ở trên cùng tất cả các lớp khác, bất kể z-index là gì. Khi bạn mở một phần tử <dialog> 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 các phần tử lớp trên cùng, bảng điều khiển Elements (Phần tử) sẽ thêm một 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ó huy hiệu ink_selectiontop-layer (N) bên cạnh, trong đó N là số chỉ mục của phần tử. 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 ink_selectiontop-layer (N) trong bản xem trước sau đây:

1. Trong bản xem trước, hãy nhấp vào Mở hộp thoại.
2. Kiểm tra hộp thoại.
3. Trong cây DOM, hãy nhấp vào huy hiệu ink_selectiontop-layer (1) bên cạnh phần tử <dialog>. Bảng Phần tử sẽ đưa bạn đến phần tử tương ứng trong vùng chứa #top-layer sau thẻ đóng </html>.
4. Quay lại phần tử <dialog> bằng cách nhấp vào huy hiệu ink_selectionreveal bên cạnh phần tử hoặc ::backdrop của phần tử đó.

Nội dung nghe nhìn

Huy hiệu media bị tắt theo mặc định. Khi được bật, bảng điều khiển 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 Media (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 phần 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.