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 Elements (Phần tử) cung cấp 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ư 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.
Bảng điều khiển Phần tử cũng có các thẻ chứa các công cụ liên quan sau đây:
Kiểu:
- Xem và gỡ lỗi các quy tắc CSS được áp dụng cho một phần tử trong 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 cá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 phần khai báo, áp dụng một lớp và tương tác với Box model.
- Truy cập các lựa chọn chỉnh sửa vùng chứa với Huy hiệu có trong cây DOM.
Đã tính toán: Thuộc tính đã phân giải của danh sách được áp dụng cho một phần tử khi đượ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à 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 ra trình nghe bị động hoặc trình nghe 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, xóa hoặc hiển thị chúng.
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 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 ở vị trí bất kỳ 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 thành phần 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.