Khám phá các hiệu ứng hữu ích để áp dụng cho trang của bạn bằng tài liệu tham khảo này về các tuỳ chọn thẻ Rendering (Hiển thị).
Làm nổi bật khung quảng cáo
Cách kiểm tra xem khung hình có được gắn thẻ là quảng cáo hay không:
- Mở thẻ Rendering (Hiển thị) trên bản minh hoạ này rồi đánh dấu vào Highlight ad frames (Nhấn mạnh khung quảng cáo).
- Quan sát khung quảng cáo được đánh dấu màu đỏ.
Mô phỏng một trang được đặt tiêu điểm
Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số thành phần lớp phủ sẽ tự động ẩn nếu được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn Mô phỏng một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang ở tiêu điểm.
Cách mô phỏng một trang được đặt tiêu điểm:
- Mở một trang có phần tử cần gỡ lỗi, chẳng hạn như trang web YouTube có thanh tìm kiếm.
Trên trang, hãy mở thẻ Rendering (Hiển thị), sau đó đánh dấu và xoá Emulate a focused page (Mô phỏng một trang được lấy làm tâm điểm).
Bạn cũng có thể thấy tuỳ chọn tương tự bên dưới nút :hov trên thanh thao tác trong phần Phần tử > Kiểu.
Để tìm hiểu thêm các cách đóng băng phần tử, hãy xem bài viết Đóng băng màn hình và kiểm tra các phần tử biến mất.
Tắt phông chữ trên máy
Kiểm tra xem các phông chữ cục bộ thay thế có hoạt động như dự kiến hay không bằng cách tắt các nguồn local() trong quy tắc @font-face.
Thông thường, nhà phát triển và nhà thiết kế sử dụng hai bản sao khác nhau của cùng một phông chữ trong quá trình phát triển:
- Một phông chữ cục bộ cho các công cụ thiết kế của bạn và
- Phông chữ web cho mã
Việc tắt phông chữ trên máy sẽ giúp bạn dễ dàng:
- Gỡ lỗi và đo lường hiệu suất tải phông chữ web cũng như khả năng tối ưu hoá
- Xác minh tính chính xác của các quy tắc
@font-faceCSS - Tìm hiểu mọi điểm khác biệt giữa phông chữ trên web và phiên bản trên máy
Mô phỏng các nguồn local() bị thiếu trong các quy tắc @font-face:
Kiểm tra câu lệnh ở trên, mở Elements (Thành phần) > Computed (Đã tính toán), cuộn xuống hết và trong Rendered Fonts (Phông chữ đã kết xuất), bạn sẽ thấy Chrome tìm thấy Courier New trong các tệp cục bộ.
Mở thẻ Rendering (Hiển thị), đánh dấu vào Disable local fonts (Tắt phông chữ trên máy) rồi tải lại trang.
Hãy quan sát câu bằng Roboto trên web.
Bật chế độ tối tự động
Xem trang web của bạn có thể trông như thế nào ở chế độ tối ngay cả khi bạn chưa triển khai chế độ này.
Chrome 96 đã ra mắt Bản dùng thử theo nguyên gốc cho Giao diện tối tự động trên Android. Với tính năng này, trình duyệt sẽ áp dụng giao diện tối được tạo tự động cho các trang web có giao diện sáng nếu người dùng chọn sử dụng giao diện tối trong hệ điều hành.
Cách bật chế độ tối tự động:
- Trên trang này, hãy mở thẻ Kết xuất rồi chọn Bật chế độ tối tự động.
- Xem trang này ở chế độ tối.
Mô phỏng khiếm khuyết thị lực
Mọi người đều có thể truy cập và tận hưởng web. Google cam kết sẽ hiện thực hoá điều đó.
Với Công cụ của Chrome cho nhà phát triển, bạn có thể biết cách những người khiếm thị xem trang web của bạn để bạn có thể cải thiện trang web cho họ. Để biết thêm thông tin, hãy xem nội dung Mô phỏng hội chứng mù màu.
Cách mô phỏng khiếm khuyết thị lực:
- Mở thẻ Kết xuất.
Trong phần Mô phỏng khiếm khuyết về thị lực, hãy chọn một trong các mục sau trong danh sách thả xuống:
- Không mô phỏng.
- Tầm nhìn mờ.
- Giảm độ tương phản.
- Mù màu đỏ (không có màu đỏ). Nhận thức kém về màu đỏ; nhầm lẫn giữa xanh lục, đỏ và vàng.
- Mù màu xanh lục (không có màu xanh lục). Nhận thức ít về màu xanh lục; nhầm lẫn giữa xanh lục, đỏ và vàng.
- Mù màu xanh dương (không có màu xanh dương). Nhận biết màu xanh dương ở mức thấp; nhầm lẫn giữa màu xanh lục và xanh dương.
- Mù màu sắc (không màu). Không nhìn thấy màu sắc một phần hoặc hoàn toàn.
Tắt định dạng hình ảnh AVIF và WebP
Các quy trình mô phỏng này giúp nhà phát triển dễ dàng thử nghiệm nhiều tình huống tải hình ảnh mà không cần phải chuyển đổi trình duyệt.
Giả sử bạn có mã HTML sau để phân phát hình ảnh ở định dạng AVIF và WebP cho các trình duyệt mới hơn, với hình ảnh PNG dự phòng cho các trình duyệt cũ hơn.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
Để tắt tất cả hình ảnh AVIF trên một trang (hoặc tương tự như hình ảnh WebP):
- Mở thẻ Rendering (Hiển thị), đánh dấu vào Disable AVIF image format (Tắt định dạng hình ảnh AVIF).
- Tải lại trang và di chuột qua
img src. Hình ảnh hiện tại src (currentSrc) hiện là hình ảnh WebP dự phòng.
Tương tự, bạn có thể tắt hình ảnh WebP.