Ver las propiedades de los objetos DOM

Sofia Emelianova
Sofia Emelianova

Usa la pestaña Elementos > Propiedades para explorar y filtrar propiedades de objetos DOM.

Abre la pestaña Properties

Para abrir la pestaña Propiedades, sigue estos pasos:

  1. Abre las Herramientas para desarrolladores. De forma predeterminada, se abre el panel Elementos.
  2. En el árbol del DOM, selecciona un nodo.
  3. Abre la pestaña Propiedades. Si no ves la pestaña, haz clic en Más y, luego, selecciónala en el menú desplegable.

Panel de elementos abierto en la pestaña Propiedades

Cómo detectar propiedades propias

La pestaña Propiedades ordena y muestra primero las propiedades propias del objeto en negrita.

ALT_TEXT_HERE

Cómo encontrar el origen de una propiedad heredada

La pestaña Properties evalúa los accesores en los elementos integrados y los muestra en el objeto como heredados y en fuente normal.

Para encontrar el origen de una propiedad heredada, expande un objeto, luego su [[Prototype]], luego el [[Prototype]] anidado, y así sucesivamente.

Se rastrea la propiedad de tamaño hasta su método get en la cadena de prototipos.

En este ejemplo, puedes rastrear de dónde proviene la propiedad size heredada si localizas la propiedad propia original (en negrita) en la cadena de prototipos 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.

Propiedades específicas del prototipo.

Filtrar propiedades

Para encontrar una propiedad rápidamente, comienza a escribir su nombre o valor en el cuadro de entrada Filtro.

Filtro

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.

Propiedades con valores nulos

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>. Propiedades sencillas.

Objetos y arrays

Las propiedades que se pueden contraer () son objetos {} o arrays []. Propiedades que se pueden contraer.

Para obtener más información sobre cómo inspeccionar objetos de JavaScript, consulta Cómo inspeccionar propiedades de objetos.

Propiedades que corresponden a nodos 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 DOM. Vincula al nodo DOM principal.

Propiedades propias y heredadas

Las propiedades en negrita son propias del objeto. Se definen directamente en el objeto.

Las propiedades en fuente normal se heredan de la cadena de prototipos. Para mostrártelos, DevTools evalúa los accesores relevantes en los elementos HTML integrados. Propiedades propias y heredadas DevTools ordena primero las propiedades propias para que sean más fáciles de detectar.

Propiedades enumerables y no enumerables

Las propiedades enumerables son de color brillante. Las propiedades no enumerables se silencian. Propiedades enumerables y no enumerables Puedes iterar sobre las propiedades enumerables con el bucle for … in o el método Object.keys().

Métodos

Los métodos se marcan con un f (). Método

Para obtener más información sobre las funciones, consulta Cómo inspeccionar funciones en Console.