CursosEmpresasBlogLiveConfPrecios

JavaScript con DOM en Dev Tools

Clase 9 de 22 • Curso de Debugging con Chrome DevTools

Clase anteriorSiguiente clase
Resumen

Aprende a conectar la consola de Dev Tools con el DOM para seleccionar y manipular elementos de HTML con JavaScript, validar interacciones en vivo y evitar prueba y error en tu editor. Verás cómo usar $0, copiar un JS path con querySelector y cambiar estilos al instante para acelerar tu flujo de trabajo.

¿Cómo conectar JavaScript con Dev Tools y el DOM?

La vista de Elements muestra los nodos del DOM (etiquetas de HTML) y sus estilos. Aquí el foco está en la consola: desde ahí puedes leer y modificar elementos seleccionados, crear variables y aplicar estilos con JavaScript en tiempo real.

  • Selecciona un nodo en Elements y obténlo con $0.
  • Copia un JS path listo para usar con querySelector.
  • Asigna el elemento a una variable y cambia su estilo.

¿Qué hace $0 en la consola de Dev Tools?

$0 referencia el elemento actualmente seleccionado en Elements. Útil para inspeccionar y modificar el nodo activo sin buscarlo de nuevo.

// Tras seleccionar <main> en Elements:
$0

// Cambia a <header> en Elements y vuelve a traerlo:
$0

También puedes usar selectores clásicos cuando corresponda: document.getElementById, getElementsByClassName, getElementsByTagName o querySelector/querySelectorAll.

¿Cómo obtener un JS path con copy JS path?

Si necesitas un selector preciso, haz clic derecho sobre el elemento en Elements > Copy > Copy JS path. Obtendrás un document.querySelector(...) listo para pegar en la consola.

// Ejemplo típico que puede devolver Copy JS path:
const header = document.querySelector('body > header');
header; // Referencia al nodo <header>.

¿Cómo ocultar un elemento con style.display?

Una vez tienes la referencia, modifica estilos desde JavaScript. Cambiar display a none lo oculta de inmediato.

var header = document.querySelector('body > header');
header.style.display = 'none';

Con esto ya tienes interacción directa con nodos del DOM: seleccionar, leer y aplicar estilos.

¿Para qué usar la consola antes del editor de texto?

Para validar que el resultado sea el esperado sin guardar archivos. Así evitas ciclos largos de prueba y error y confirmas la lógica antes de llevarla al editor.

  • Probar funciones que reaccionen a eventos de usuario como hover o click.
  • Ver cambios en vivo sobre elementos y ajustar al instante.
  • Manipular HTML, CSS y nodos del DOM con JavaScript desde la consola.
  • Confirmar resultados esperados y corregir sobre la marcha.
  • Mantener conexión directa entre Elements y consola para acelerar el diagnóstico.

¿Qué interacciones conviene validar primero?

Empieza por acciones simples y visibles para confirmar la lógica base.

  • Mostrar/ocultar con style.display.
  • Cambiar clases o estilos en respuesta a hover o click.
  • Crear o insertar nodos antes de integrarlos al proyecto.

¿Qué sigue: cómo guardar cambios de Dev Tools a archivos locales?

Hasta aquí, los cambios en Dev Tools son temporales: puedes manipular HTML, CSS y el DOM y verificar interacciones con JavaScript. El siguiente paso es dejar esos cambios guardados en local en tus archivos del editor sin copiar y pegar a mano. Esa configuración se verá a continuación.

¿Qué interacción te gustaría probar con Dev Tools y el DOM? Comparte tu caso y lo iteramos juntos.