Usa la opción Elementos > La pestaña Properties para explorar y filtrar las propiedades de los objetos DOM.
Abre la pestaña Propiedades.
Para abrir la pestaña Propiedades, sigue estos pasos:
- Abre las Herramientas para desarrolladores. De forma predeterminada, se abre el panel Elementos.
- En el árbol del DOM, selecciona un nodo.
- Abre la pestaña Propiedades. Si no puede ver la pestaña, haga clic en Más y selecciónela en el menú desplegable.
Propiedades propias del spot
La pestaña Properties ordena y muestra las propias propiedades del objeto primero y en negrita.
Cómo encontrar el origen de una propiedad heredada
La pestaña Properties evalúa los descriptores de acceso en elementos integrados y los muestra en el objeto como heredados y en fuentes normales.
Para encontrar el origen de una propiedad heredada, expande un objeto, luego su [[Prototype]], luego el [[Prototype]] anidado, y así sucesivamente.
En este ejemplo, puedes rastrear de dónde provino la propiedad size heredada si ubicas la propiedad original (en negrita) en la cadena del prototipo junto con el método get correspondiente.
Además, las propiedades específicas del prototipo solo se muestran en los prototipos, no en los objetos. Esto facilita el diagnóstico de los objetos.
Filtrar propiedades
Para encontrar una propiedad rápidamente, comienza a escribir su nombre o valor en el cuadro de entrada Filtro.
Cómo mostrar todas las propiedades
De forma predeterminada, la pestaña Properties no muestra propiedades con valores null y undefined.
Para ver todas las propiedades, marca Mostrar todo.
Comprende las propiedades
En la pestaña Elementos > Propiedades, se muestra una variedad de propiedades.
Propiedades simples
Las propiedades simples son pares de <name>: <value>.
Objetos y arrays
Las propiedades contraíbles () son objetos {} o arrays [].
Para obtener más información sobre cómo inspeccionar objetos de JavaScript, consulta Cómo inspeccionar propiedades de objetos.
Propiedades que corresponden a los nodos del DOM
Las propiedades que corresponden a los nodos DOM son vínculos. Haz clic en un vínculo para seleccionar el nodo relevante en el árbol de DOM.
Propiedades propias y heredadas
Las propiedades en negrita son propias del objeto. Se definen directamente en el objeto.
Las propiedades en la fuente normal se heredan de la cadena del prototipo. Para mostrártelos, DevTools evalúa los accesores relevantes en los elementos HTML integrados.
Herramientas para desarrolladores ordena sus propiedades primero para que sean más fáciles de detectar.
Propiedades enumerables y no enumerables
Las propiedades enumerables son de color brillante. Las propiedades que no son enumerables están silenciadas.
Puedes iterar en las propiedades enumerables con el bucle
for … in o el método Object.keys().
Métodos
Los métodos se marcan con un f ().
Para obtener más información sobre las funciones, consulta Cómo inspeccionar funciones a través de la consola.