Bật/tắt nhiều lớp phủ và tăng tốc độ điều hướng cây DOM bằng cách tham chiếu 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 thị hoặc ẩn 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 chọn Huy hiệu Settings... (Cài đặt huy hiệu).
- Chọn hoặc bỏ chọn các hộp đánh dấu bên cạnh các huy hiệu đã chọn.
Bảng điều khiển Elements (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 về từng huy hiệu.
Lưới
Một 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ử đó có huy hiệu grid bên cạnh để bật/tắt các lớp phủ tương ứng.
Chuyển đổi lớp phủ trên bản xem trước sau đây:
- 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ử và quan sát lớp phủ.
Lớp phủ hiển thị các cột, hàng, số của các cột này và khoảng trống.
Để tìm hiểu cách gỡ lỗi bố cục lưới, hãy xem phần Kiểm tra lưới CSS.
Lưới phụ
Lưới phụ là một lưới lồng nhau sử dụng các bản nhạc giống với lưới mẹ. 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ủa phần tử đó được đặt thành subgrid. Các phần tử đó có huy hiệu subgrid bên cạnh để bật/tắt các lớp phủ tương ứng.
Chuyển đổi lớp phủ trên bản xem trước sau đây:
- 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ử và quan sát lớp phủ.
Lớp phủ hiển thị các cột, hàng, số của chúng và khoảng trống của một lưới con.
Flex
Một phần tử HTML là vùng chứa linh hoạt 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ử đó có huy hiệu flex bên cạnh để bật/tắt các lớp phủ tương ứng.
Chuyển đổi lớp phủ trên bản xem trước sau đây:
- 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ử và 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 CSS flexbox.
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 quảng cáo đó. Các khung như vậy sẽ 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 đây:
- 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 có thể sử dụng thẻ Hiển thị để làm nổi bật khung quảng cáo bằng màu đỏ.
Chụp nhanh
Một phần tử HTML là vùng chứa cuộn nếu thuộc tính CSS overflow của vùng chứa đó đượ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 giúp định cấu hình điểm chụp nhanh. Các phần tử đó có huy hiệu scroll-snap bên cạnh để bật/tắt các lớp phủ tương ứng.
Chuyển đổi lớp phủ trên bản xem trước sau đây:
- 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ủ hiển thị vị trí của phần tử và các điểm chụp nhanh.
Vùng chứa
Một phần tử HTML là một vùng chứa nếu nó có thuộc tính CSS container-type. Các phần tử đó có huy hiệu container bên cạnh để bật/tắt các lớp phủ tương ứng.
Chuyển đổi lớp phủ trên bản xem trước sau đây:
- 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 cùng 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ủ hiển thị 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.
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ây DOM riêng biệt và trình bày các cây này cùng nhau. Các phần tử nội dung vị trí có huy hiệu 
slot bên cạnh chúng phân phát dưới dạng đường liên kết đến các vị trí tương ứng.
Khám phá huy hiệu 
slot trong bản xem trước sau đây:
- 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í tương ứng.
- Quay lại nội dung của vị trí 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 ảnh hóa lớp đó. Lớp trên cùng hiển thị nội dung trên 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ẽ đưa phần tử này vào lớp trên cùng.
Để giúp bạn trực quan hoá các phần tử của lớp trên cùng, bảng điều khiển Phần tử sẽ thêm một vùng chứa #top-layer vào cây DOM sau thẻ đóng </html>.
Các phần tử lớp trên cùng có huy hiệu 
top-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 thành phần 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 đây:
- Trong bản xem trước, hãy nhấp vào 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 Phần tử sẽ đưa bạn đến phần tử tương ứng trong vùng chứa#top-layersau thẻ đóng</html>.
- Quay lại phần tử
<dialog>bằng cách nhấp vào huy hiệu
revealbên cạnh phần tử đó hoặc::backdropcủa phần tử đó.
Nội dung nghe nhìn
Theo mặc định, huy hiệu media bị tắt. Khi được bật, nó 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 của bạ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 đa phương tiện bằng bảng điều khiển Nội dung đa phương tiện.