在前端开发的精彩世界里，Chrome DevTools 就像一个无所不能的魔法工具箱，其中的元素面板对于探索网页的 DOM（Document Object Model）结构有着不可替代的作用。特别是查看 DOM 对象的属性这一功能，更是深入理解和优化网页的关键环节
打开“属性”窗格 🌈
- 在 DOM 树中，选择一个节点
-
打开 属性 标签页。如果您看不到该标签页，请点击 更多，然后从下拉菜单中选择该标签页
-
发现自身的属性 🌈
-
Properties 窗格会进行排序，先展示自身属性用加粗显示
查找继承属性的来源 🌈
-
继承属性以常规字体展示，如需查找继承属性的来源，请展开对象，然后展开对象
[[Prototype]]，接着展开嵌套的[[Prototype]]，以此类推。在本例中，您可以通过在原型链上找到原始的自有（粗体）属性以及对应的 getter 来跟踪继承的
size属性的来源。
过滤媒体资源 🌈
- 要快速查找属性，请先在过滤条件文本框中输入其名称或值
显示所有属性 🌈
-
默认情况下，Properties 窗格不显示具有
null和undefined值的属性。要查看所有属性，请选中全部显示
了解属性 🌈
简单属性 🐾
- 简单属性是一对
<name>: <value>。
数组和对象 🐾
- 可折叠
>属性是对象{}或数组[]
与 DOM 节点对应的属性 🐾
- 与 DOM 节点对应的属性是链接。点击链接即可选择 DOM 树中的相关节点。
可枚举和非枚举属性 🐾
- 可枚举属性的颜色是明亮的。非枚举属性是灰暗的。
您可以使用
for … in循环或Object.keys()方法遍历可枚举属性。
方法 🐾
- 方法标有
f ()
