Sử dụng bảng điều khiển 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 Phần tử 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 chúng bằng các công cụ khác.
Ngăn 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 biểu định 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 một khai báo, áp dụng một lớp và tương tác với Mô hình hộp.
- Truy cập vào các lựa chọn chỉnh sửa vùng chứa bằng Huy hiệu 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 Chrome hiển thị các thuộc tính đó.
Layout (Bố cục): Chứa các lựa 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à thuộc tính của chúng. 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à thuộc tính được kế thừa của đối tượng.
Khả năng 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 Lệnh bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Bắt đầu nhập
Elements, chọn Show Elements (Hiện các phần tử) rồi nhấn Enter. Công cụ cho nhà phát triển sẽ hiển thị bảng điều khiển Phần tử trong Ngăn kéo ở cuối cửa sổ Công cụ cho nhà phát triển.