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 thông tin tham khảo toàn diện này về các 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:

1. Mở DevTools.
2. 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 một số 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 của trang HTML. Nhấp vào đó để 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 bối cảnh trang (nhấp chuột phải) của Chrome:

1. Trong Chrome, hãy nhấp chuột phải > Kiểm tra một trang.
2. Trong bảng điều khiển Elements (Phần tử), hãy nhấp vào huy hiệu view-source bên cạnh thẻ <html>.
3. Kiểm tra nguồn trang trong bảng điều khiển Nguồn.

Lưới

Phần tử HTML là một 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. Những phần tử như vậy có huy hiệu grid bên cạnh để bật/tắt lớp phủ tương ứng.

Bật/tắt lớp phủ trên 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 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ủ này cho biết các cột, hàng, số lượng 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 con

Lưới phụ là một lưới lồng nhau sử dụng cùng một dải 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. Những phần tử như vậy có huy hiệu subgrid bên cạnh để bật/tắt lớp phủ tương ứng.

Bật/tắt lớp phủ trên 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 nhấp vào huy hiệu subgrid bên cạnh phần tử và quan sát lớp phủ.

Lớp phủ này cho biết các cột, hàng, số lượng và khoảng trống của một lưới phụ.

Gập

Một phần tử HTML là một vùng chứa linh hoạt nếu thuộc tính display CSS của phần tử đó được đặt thành flex hoặc inline-flex. Những 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 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 nhấp vào huy hiệu flex bên cạnh phần tử và 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 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ẻ cho các khung đó. Những khung hình 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 đây:

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 nếu di chuột lên huy hiệu này, bạn sẽ thấy một chú thích cung cấp thông tin về lý do phần tử đó được xác định là quảng cáo, chẳng hạn như:

• Nguồn gốc của tập lệnh: Tập lệnh nào tham gia vào việc tạo phần tử.
• Quy tắc danh sách bộ lọc: Quy tắc cụ thể trong danh sách bộ lọc (ví dụ: EasyList) khớp với phần tử hoặc tài nguyên mà quy tắc đó đã tải.

Bạn cũng có thể sử dụng thẻ Rendering (Hiển thị) để đánh dấu khung quảng cáo bằng màu đỏ.

Cuộn

Phần tử HTML là một 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. Những phần tử như vậy có huy hiệu scroll bên cạnh.

Scroll-snap

Vùng chứa cuộn có thể có các thuộc tính CSS định cấu hình điểm bám dính. Những 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 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 nhấp vào huy hiệu scroll-snap bên cạnh phần tử.
3. Thử di chuyển phần tử sang bên phải và quan sát lớp phủ.

Lớp phủ này cho biết vị trí của phần tử và điểm gắn kết.

Vùng chứa

Phần tử HTML là một vùng chứa nếu có thuộc tính CSS container-type. Những phần tử như vậy có huy hiệu container bên cạnh để bật/tắt lớp phủ tương ứng.

Bật/tắt lớp phủ trên 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 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 và quan sát sự thay đổi cũng như lớp phủ của bố cục.

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.

Khe

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 vào. 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 trong ô có huy hiệu ink_selectionslot bên cạnh, đóng vai trò 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:

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ử để xác định vị trí của 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à hình dung được khái niệm này. 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. 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ử đó 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 Elements (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 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:

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 điều khiển Elements (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 được tắt theo mặc định. Khi bật, biểu tượng 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 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 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à mọi phần tử có thuộc tính popover và hữu ích cho nhiều mẫu tương tác, bao gồm cả chú thích, cảnh báo, thông báo và nhiều mẫu khác. Những 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 huy hiệu đó, 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:

1. Trong bản xem trước, hãy nhấp vào TOGGLE POPOVER (BẬT/TẮT CỬ SỔ BẬT LÊN).
2. Kiểm tra cửa sổ bật lên xuất hiện.

3. Trong cây DOM, hãy nhấp vào huy hiệu popover bên cạnh phần tử <div popover>. Bảng điều khiển Elements (Phần tử) cho bạn thấy huy hiệu top-layer.

   

4. 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 kiểu ban đầu của một phần tử trước khi phần tử đó được hiển thị trên trang. Bạn cần làm việc này cho các phần tử tạo ảnh động từ display: none, vì các phần tử này cần có một trạng thái để tạo ảnh động. Những 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ể xem ảnh động hoạt động.

Khám phá huy hiệu starting-style trong bản xem trước sau:

1. Trong bản xem trước, hãy nhấp vào OPEN POPOVER (MỞ CỬA SỔ BẬT LÊN).
2. Kiểm tra cửa sổ bật lên xuất hiện.

3. Trong cây DOM, hãy bật/tắt huy hiệu starting-style bên cạnh phần tử <div popover>.

   

4. Quan sát ảnh động đang hoạt động và các kiểu đang được áp dụng trong thẻ Elements (Phần tử) > Styles (Kiểu).

Để tìm hiểu thêm, hãy xem bài viết Tạo ảnh động cho cửa sổ bật lên.

Phần tử tuỳ chỉnh

Phần tử HTML tuỳ chỉnh được xác định bằng tên thẻ có dấu gạch nối hoặc thuộc tính is="..." cho các phần tử tích hợp tuỳ chỉnh có huy hiệu custom-element bên cạnh trong cây DOM.

Nhấp vào huy hiệu để chuyển đến mã có liên quan trong bảng điều khiển Nguồn.