Supervisión de cambios en JavaScript mediante expresiones dinámicas

Las expresiones dinámicas son una excelente manera de supervisar el valor de las expresiones de JavaScript que cambian mucho con el tiempo. En lugar de generar muchos mensajes de consola distintos que tiene que leer y desplazar, puede anclar expresiones de JavaScript a la parte superior de la herramienta Consola .

Con Live Expressions, verá el valor de las expresiones de JavaScript en la parte superior de la herramienta Consola , siempre en el mismo lugar, y puede seguir usando los registros de consola para los valores que no cambian con tanta frecuencia.

Las expresiones dinámicas se ejecutan exclusivamente en el equipo y no es necesario cambiar nada en el código para mostrar sus valores.

Adición de una nueva expresión dinámica

Para agregar una expresión dinámica:

1. Abra la página web de demostración de expresiones en directo en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en cualquier lugar de la página web y, a continuación, seleccione Inspeccionar. O bien, presione F12. DevTools se abre junto a la página web.

3. En DevTools, abra la herramienta Consola .

4. En la consola, haga clic en el icono Crear expresión dinámica ( situado junto al cuadro de texto Filtrar .

   Aparece un cuadro de texto:

   

5. Escriba la expresión document.activeElement de JavaScript en el cuadro de texto. Una expresión dinámica puede ser cualquier expresión de JavaScript válida.

6. Para guardar la expresión, presione Ctrl+Entrar (Windows, Linux) o Comando+Entrar (macOS). O bien, haga clic fuera del cuadro de texto Live Expression .

   La expresión ahora está activa y se muestra body como resultado:

   

7. Haga clic en diferentes partes de la página web o presione Tab o Mayús+Tab para mover el foco en la página web.

   El document.activeElement valor de Live Expression cambia para reflejar el elemento actualmente centrado en tiempo real:

   

Agregar más expresiones dinámicas

Puede agregar varias expresiones dinámicas a la herramienta Consola . Cada expresión dinámica se evalúa de forma independiente y los resultados se muestran en el orden en que se agregan.

Para agregar una segunda expresión dinámica:

1. En la herramienta Consola , haga clic en el icono Crear expresión activa (") situado junto al cuadro de texto Filtrar .

   Aparece un nuevo cuadro de texto debajo de la primera expresión dinámica:

   

2. Escriba una nueva expresión de JavaScript en el cuadro de texto, por ejemplo window.innerWidth , para mostrar el ancho de la ventana del explorador.

3. Repita los pasos para agregar otra expresión dinámica para window.innerHeight.

   La herramienta Consola ahora muestra tres expresiones dinámicas:

   

Quitar expresiones dinámicas

Para deshacerse de una expresión dinámica, haga clic en el icono Cerrar () situado junto a la expresión:

Reemplazar el registro de consola por expresiones dinámicas

Puede crear tantas expresiones dinámicas como desee y conservar cada expresión dinámica entre sesiones y ventanas del explorador. Las expresiones dinámicas son una manera de reducir el ruido en el flujo de trabajo de depuración.

Uso del registro de consola para mostrar las coordenadas del mouse

Para supervisar el movimiento del mouse en la página web actual:

1. Abra la página web de demostración Registro de la demostración movimiento del mouse en una nueva ventana o pestaña.

2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web de demostración.

3. Mueva el mouse sobre la página web de demostración representada.

   Aparecen muchos mensajes de registro en la consola:

   

La gran cantidad de información ralentiza el proceso de depuración y dificulta la visualización de los cambios que intenta supervisar. A medida que la consola muestra más mensajes al mover el mouse, los valores que desea ver se desplazan fuera de la pantalla.

Uso de expresiones dinámicas para mostrar las coordenadas del mouse

Use Live Expressions para supervisar el movimiento del mouse en la página web actual, sin depender de mensajes de registro detallados.

Para usar expresiones dinámicas para evitar mensajes de registro de consola excesivos:

1. Abra la página web de demostración Movimiento del mouse sin registrar la demostración en una nueva ventana o pestaña.

   Esta página web de demostración usa JavaScript para realizar un seguimiento de la posición actual del mouse y almacena las coordenadas en las x variables globales y y .

2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web de demostración.

3. Mueve el mouse alrededor.

   Los valores de las x variables y y se actualizan, pero no se muestran mensajes de registro.

4. En la herramienta Consola , haga clic en el icono Crear expresión dinámica (") situado junto al cuadro de texto Filtrar y, a continuación, escriba la expresión xde JavaScript .

5. Repita el paso anterior para agregar una segunda expresión dinámica para y.

6. Mueva el mouse alrededor en la página web representada.

   Ahora, en la consola, los valores de x las expresiones dinámicas y se y actualizan en tiempo real:

   

Vea también

• demostración de expresiones dinámicas
• Demostración de movimiento del mouse de registro
• Movimiento del mouse sin registro de demostración