Sử dụng Chế độ kiểm tra để tập trung và phân tích các phần tử cụ thể trên trang web.
Tổng quan
Khi kích hoạt Chế độ kiểm tra (bộ chọn bộ chọn) trong Công cụ cho nhà phát triển, bạn có thể di chuột qua các phần tử trên trang và xem thông tin về kiểu và hỗ trợ tiếp cận. Khi bạn nhấp vào một phần tử trong khi Chế độ kiểm tra đang hoạt động, phần tử DOM tương ứng sẽ được làm nổi bật trong cây DOM của bảng điều khiển Phần tử và liệt kê các kiểu liên quan trong thẻ Kiểu.
Kích hoạt Chế độ kiểm tra
Cách kích hoạt Chế độ kiểm tra:
- Mở DevTools
- Nhấp vào nút Inspect mode (Chế độ kiểm tra) trong thanh thao tác.
Bộ chọn bộ chọn sẽ hoạt động khi biểu tượng Inspect mode (Chế độ kiểm tra) có màu xanh dương.
Bạn cũng có thể sử dụng phím tắt trong Chrome để mở bảng điều khiển Elements (Phần tử) ở Inspect mode (Chế độ kiểm tra). Nhấn một trong các phím sau:
- macOS: Cmd+Option+C
- Windows, Linux, ChromeOS: Ctrl+Shift+C
Sử dụng chế độ Kiểm tra để xem thông tin về kiểu và hỗ trợ tiếp cận
Khi Chế độ kiểm tra đang hoạt động, hãy di chuột qua các phần tử trên trang. Thao tác này sẽ làm nổi bật phần tử và hiển thị một lớp phủ chú giải công cụ. Bảng điều khiển Elements (Phần tử) sẽ tự động mở rộng cây DOM để làm nổi bật phần tử mà bạn đang di chuột qua.
Tuỳ thuộc vào phần tử, chú giải công cụ Inspect mode (Chế độ kiểm tra) sẽ hiển thị các thuộc tính kiểu sau:
- Bộ chọn của phần tử.
- Kích thước của phần tử, tính bằng pixel.
- Màu nền của phần tử.
- Màu văn bản của phần tử.
- Các thuộc tính phông chữ của phần tử.
- Khoảng đệm của phần tử, tính bằng pixel.
- Lề của phần tử, tính bằng pixel.
Ngoài ra, các phần tử sử dụng lưới CSS hoặc hộp xếp CSS sẽ có một biểu tượng khác xuất hiện bên cạnh tên của phần tử.
Phần hỗ trợ tiếp cận của chú giải công cụ sẽ hiển thị thông tin sau:
- Tên và vai trò của phần tử được báo cáo cho công nghệ hỗ trợ.
- Liệu phần tử có thể lấy tiêu điểm bằng bàn phím hay không.
Cụ thể, khi di chuột qua tiêu đề văn bản, bạn sẽ thấy tỷ lệ tương phản. Tỷ lệ này đo lường sự khác biệt về độ sáng giữa màu nền trước (màu văn bản) và màu nền sau.
Tỷ lệ tương phản tốt là yếu tố quan trọng để văn bản dễ đọc. Tìm hiểu cách khắc phục văn bản có độ tương phản thấp.
Duy trì và ẩn chú giải công cụ của chế độ Kiểm tra
Để giữ nguyên chú giải công cụ Inspect mode (Chế độ kiểm tra) trong khi vẫn có thể di chuyển con trỏ chuột sang vị trí khác, hãy nhấn và giữ:
- macOS: Ctrl+Option
- Windows, Linux, ChromeOS: Ctrl+Alt
Để tạm thời ẩn chú giải công cụ kiểm tra trong khi bạn di chuyển con trỏ chuột, hãy nhấn và giữ phím Ctrl.
Kiểm tra các phần tử không truy cập được
Ban đầu, Chế độ kiểm tra không thể nhắm đến các phần tử có thuộc tính CSS pointer-events: none;.
Để kiểm tra các phần tử không truy cập được, hãy nhấn phím Shift trong khi di chuột qua phần tử đó.
