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, cũng giống như 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 Phần tử cũng có các thẻ sau 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 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 phần khai báo, áp dụng lớp và tương tác với Mô hình Box.
- 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: Danh sách 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 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à 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à được kế thừa của đối tượng.
Accessibility (Trợ năng): Liệt kê các phần tử có nhãn ARIA và thuộc tính của chúng. 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 cứ đâu 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 Hiển thị các phần tử rồi nhấn phím Enter. Công cụ cho nhà phát triển hiển thị bảng điều khiển Phần tử trong Ngăn ở cuối cửa sổ Công cụ cho nhà phát triển.