Sử dụng ngăn Phần tử > Tài sản để duyệt xem và lọc thuộc tính của đối tượng DOM.
Mở ngăn Thuộc tính
Để mở ngăn Properties (Thuộc tính), 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ẻ Properties (Thuộc tính). Nếu bạn không thể thấy thẻ đó, hãy nhấp vào biểu tượng Thêm
, rồi chọn thẻ đó từ trình đơn thả xuống.
Nhận diện cơ sở lưu trú riêng
Ngăn 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 bằng phông chữ đậm.
Tìm nguồn gốc của một tài sản kế thừa
Ngăn Properties (Thuộc tính) sẽ đánh giá trình truy cập trên các phần tử tích hợp sẵn và hiển thị các trình truy cập này trên đối tượng dưới dạng được 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ể tìm ra nguồn gốc của thuộc tính size kế thừa bằng cách xác định vị trí của 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 của mỗi 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. Nhờ đó, bạn có thể chẩn đoán các đối tượng dễ dàng hơn.
Lọc thuộc tính
Để tìm nhanh 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 văn bản Bộ lọc.
Hiện tất cả cơ sở lưu trú
Theo mặc định, ngăn Properties (Thuộc tính) không hiển thị các cơ sở lưu trú có giá trị null và undefined.
Để xem tất cả cơ sở lưu trú, hãy đánh dấu vào ô Hiện tất cả.
Tìm hiểu về các cơ sở lưu trú
Ngăn Phần tử > Thuộc tính cho thấy nhiều thuộc tính.
Thuộc tính đơn giản
Các thuộc tính đơn giản là cặp của <name>: <value>.
Đối tượng và mảng
Các 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.
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à các đường liên kết. Hãy nhấp vào một đường liên kết để chọn nút liên quan trong cây DOM.
Tài sản sở hữu và kế thừa
Các thuộc tính có phông chữ đậm là thuộc tính của riêng đối tượng. Chúng được xác định trực tiếp trên đối tượng.
Các thuộc tính có phông chữ thông thường được kế thừa từ chuỗi nguyên mẫu. Để hiển thị các chỉ số này cho bạn, Công cụ cho nhà phát triển sẽ đánh giá các trình truy cập có liên quan trên các phần tử HTML tích hợp sẵn.
DevTools sẽ sắp xếp các thuộc tính riêng trước để giúp bạn dễ dàng phát hiện các thuộc tính đó hơn.
Thuộc tính có thể liệt kê và không thể liệt kê
Thuộc tính enum có màu tươi 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, hãy xem phần Kiểm tra hàm qua Bảng điều khiển.