Sử dụng bảng điều khiển Elements (Phần tử) để kiểm tra và chỉnh sửa các phần tử DOM.
Tổng quan
Bảng điều khiển Elements (Thành phần) cung cấp một giao diện mạnh mẽ để kiểm tra và thao tác với DOM. Bạn có thể sử dụng cây DOM (tương tự như một tài liệu HTML) để chọn các nút DOM cụ thể và sửa đổi các nút đó bằng các công cụ khác.
Bảng điều khiển Elements (Phần tử) cũng có các thẻ sau đây chứa các công cụ có liên quan:
Kiểu:
- Xem và gỡ lỗi các quy tắc CSS được áp dụng cho một phần tử từ tất cả các trang kiểu.
- Tìm mọi CSS không hợp lệ, bị ghi đè, không hoạt động hoặc CSS khác không hoạt động như dự kiến.
- Chỉnh sửa các phần tử bằng cách thêm nội dung khai báo, áp dụng một lớp và bằng cách tương tác với mô hình Hộp.
- Truy cập vào các tuỳ chọn chỉnh sửa vùng chứa bằng Huy hiệu có trong cây DOM.
Đã tính toán: Liệt kê các thuộc tính đã phân giải được áp dụng cho một phần tử khi các thuộc tính đó được Chrome hiển thị.
Layout (Bố cục): Chứa các tuỳ chọn để sửa đổi lớp phủ lưới và flexbox.
Trình nghe sự kiện: Liệt kê tất cả trình nghe sự kiện và các thuộc tính của trình nghe đó. Cho phép bạn tìm nguồn của trình nghe sự kiện và lọc trình nghe thụ động hoặc chặn.
Điểm ngắt DOM: Liệt kê các điểm ngắt thay đổi DOM được thêm từ bảng điều khiển Phần tử và cho phép bạn bật, tắt, xoá hoặc hiển thị các điểm ngắt đó.
Thuộc tính: Chọn một nút DOM để kiểm tra và sắp xếp các thuộc tính riêng và được kế thừa của đối tượng.
Hỗ trợ tiếp cận: Liệt kê các phần tử có nhãn ARIA và thuộc tính của các phần tử đó. Cho phép bạn bật/tắt và kiểm tra cây hỗ trợ tiếp cận (thử nghiệm).
Mở bảng điều khiển Phần tử
Theo mặc định, khi bạn mở Công cụ cho nhà phát triển, bảng điều khiển Phần tử sẽ mở ra. Bạn cũng có thể kiểm tra một nút ở bất kỳ vị trí nào trên trang để tự động mở bảng điều khiển Phần tử.
Cách mở bảng điều khiển Phần tử theo cách thủ công:
- Mở Công cụ cho nhà phát triển.
- Mở trình đơn Command (Lệnh) bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Ctrl+Shift+P
- Bắt đầu nhập
Elements, chọn Show Elements (Hiện phần tử) rồi nhấn Enter. Công cụ dành cho nhà phát triển hiển thị bảng điều khiển Elements (Phần tử) trong Drawer (Ngăn) ở cuối cửa sổ Công cụ dành cho nhà phát triển.