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

Sofia Emelianova
Sofia Emelianova
GitHub

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ở 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 rồi đánh dấu vào một hoặc nhiều huy hiệu trong trình đơn phụ Badge settings (Cài đặt huy hiệu).

Trình đơn "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 biểu tượng này để xem nguồn của trang trong bảng điều khiển Nguồn.

Huy hiệu &quot;xem nguồn&quot;.

Huy hiệu này cung cấp một quy trình thay thế cho lựa chọn Xem nguồn trang trong trình đơn ngữ 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 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

Một 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ủ lưới.

Lớp phủ này cho biết các cột, hàng, số lượng và khoảng trống của chú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 phụ là một lưới lồng nhau sử dụng các đường kẻ giống như 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ủ lưới 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 CSS display 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ủ linh hoạt.

Lớp phủ này cho biết vị trí của các 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 flexbox CSS.

DevTools 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 quảng cáo.

Bạn không thể nhấp vào huy hiệu ad nhưng có thể dùng thẻ Rendering (Kết xuất) để làm nổi bật khung quảng cáo bằng màu đỏ.

Cuộn

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

Huy hiệu cuộn trên một nút cây DOM.

Cố định vị trí cuộn

Các vùng chứa có thể cuộn có thể có các thuộc tính CSS định cấu hình điểm chụp. 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. Hãy thử cuộn phần tử sang phải và quan sát lớp phủ.

Lớp phủ scroll-snap.

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

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. 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 của phần tử đó và quan sát sự thay đổi về bố cục và lớp phủ.

Lớp phủ vùng chứa.

Lớp phủ này cho biết vị trí của các 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 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 trong ô có huy hiệu slot 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 slot 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 slot bên cạnh phần tử để xác định vị trí của khe cắm tương ứng. Quay và nhận huy hiệu.
  3. Quay lại nội dung của ô 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 rõ khái niệm về lớp trên cùng và hình dung được khái niệm đó. Lớp trên cùng hiển thị 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 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 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 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 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 đâ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 top-layer (1) bên cạnh phần tử <dialog>. Bảng 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>. Vùng chứa và huy hiệu ở lớp trên cùng.
  4. Quay lại phần tử <dialog> bằng cách nhấp vào huy hiệu reveal 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 Đa phương tiện và gỡ lỗi nội dung đa phương tiện.

Huy hiệu phương tiện được bật trong phần cài đặt huy hiệu và xuất hiện bên cạnh phần tử video.

Để 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

Popover 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 tạm thời, v.v. 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 đây:

  1. 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).
  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 Elements (Phần tử) cho bạn thấy huy hiệu top-layer.

    Huy hiệu bật lên bên cạnh phần tử có thuộc tính bật lên.

  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 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 những phần tử chuyển động vào từ display: none, vì chúng cần một trạng thái để chuyển động vào. Những phần tử như vậy có huy hiệu starting-style bên cạnh.

Huy hiệu này chuyển đổi các kiểu trong quy tắc @starting-style, nhờ đó bạn có thể thấy ảnh động đang hoạt động.

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

  1. Trong bản xem trước, hãy nhấp vào MỞ POPOVER.
  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>.

    Huy hiệu kiểu bắt đầu bên cạnh phần tử có quy tắc @starting-style.

  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 phần Tạo hiệu ứng động cho cửa sổ bật lên.