Sử dụng thẻ Phần tử > Tài sản để duyệt xem và lọc thuộc tính của các đối tượng DOM.
Mở thẻ Thuộc tính
Để mở thẻ Cơ sở lưu trú, hãy làm theo các bước sau:
- Mở Công cụ cho nhà phát triển. Theo mặc định, bảng điều khiển Phần tử sẽ mở ra.
- Trong cây DOM, hãy chọn một nút.
- Mở thẻ Thuộc tính. Nếu bạn không thấy thẻ này, hãy nhấp vào biểu tượng Thêm , sau đó chọn thẻ đó trong trình đơn thả xuống.
Khám phá các tài sản riêng
Thẻ Properties (Thuộc tính) sắp xếp và hiển thị các thuộc tính riêng của đối tượng trước tiên và bằng phông chữ đậm.
Tìm nguồn gốc của một tài sản kế thừa
Thẻ Thuộc tính đánh giá các phương thức truy cập trên các phần tử tích hợp và hiển thị các phương thức truy cập đó trên đối tượng dưới dạng kế thừa và phông chữ thông thường.
Để tìm nguồn gốc của một thuộc tính kế thừa, hãy mở rộng một đối tượng, sau đó là [[Prototype]] của đối tượng đó, sau đó là [[Prototype]] lồng nhau, v.v.
Trong ví dụ này, bạn có thể truy vết nguồn gốc của thuộc tính size được kế thừa bằng cách xác định thuộc tính gốc (in đậm) trên chuỗi nguyên mẫu cùng với phương thức getter tương ứng.
Ngoài ra, các thuộc tính dành riêng cho nguyên mẫu chỉ xuất hiện trên nguyên mẫu chứ không xuất hiện trên đối tượng. Điều này giúp bạn dễ dàng chẩn đoán các đối tượng.
Lọc thuộc tính
Để nhanh chóng tìm thấy một thuộc tính, hãy bắt đầu nhập tên hoặc giá trị của thuộc tính đó vào hộp nhập dữ liệu Bộ lọc.
Hiển thị tất cả thuộc tính
Theo mặc định, thẻ Thuộc tính không hiển thị các thuộc tính có giá trị null và undefined.
Để xem tất cả cơ sở lưu trú, hãy đánh dấu vào Hiển thị tất cả.
Tìm hiểu về thuộc tính
Thẻ Elements (Thành phần) > Properties (Thuộc tính) hiển thị nhiều thuộc tính.
Thuộc tính đơn giản
Thuộc tính đơn giản là các cặp <name>: <value>.
Đối tượng và mảng
Thuộc tính có thể thu gọn () là các đối tượng {} hoặc mảng [].
Để biết thêm thông tin về cách kiểm tra đối tượng JavaScript, hãy xem bài viết Kiểm tra thuộc tính đối tượng.
Các thuộc tính tương ứng với nút DOM
Các thuộc tính tương ứng với nút DOM là đường liên kết. Hãy nhấp vào một đường liên kết để chọn nút có liên quan trong cây DOM.
Tài sản sở hữu và tài sản thừa kế
Các thuộc tính có phông chữ đậm là thuộc tính của riêng đối tượng. Các thuộc tính này được xác định trực tiếp trên đối tượng.
Các thuộc tính trong phông chữ thông thường được kế thừa từ chuỗi nguyên mẫu. Để hiển thị các phần tử đó cho bạn, DevTools sẽ đánh giá các phương thức truy cập có liên quan trên các phần tử HTML tích hợp.
Trước tiên, DevTools sắp xếp các thuộc tính riêng để giúp bạn dễ dàng nhận ra các thuộc tính đó hơn.
Thuộc tính có thể liệt kê và không thể liệt kê
Các thuộc tính có thể liệt kê có màu sáng. Các thuộc tính không thể liệt kê sẽ bị tắt tiếng.
Bạn có thể lặp lại các thuộc tính có thể liệt kê bằng vòng lặp for … in hoặc phương thức Object.keys().
Phương thức
Các phương thức được đánh dấu bằng f ().
Để biết thêm thông tin về các hàm, vui lòng xem phần Kiểm tra hàm qua Bảng điều khiển.