W3docs
es
Iniciar sesión

Depuración y herramientas en el desarrollo web

Aprende a depurar JavaScript que manipula el DOM con las herramientas de desarrollo del navegador: inspecciona elementos, usa la consola y establece puntos de interrupción.

Cuando un script que trabaja con el DOM se comporta de forma incorrecta, la manera más rápida de averiguar por qué es observar la página desde el punto de vista del navegador. Las herramientas de desarrollo del navegador (DevTools) te permiten leer el árbol DOM en vivo, pausar la ejecución de JavaScript a mitad del proceso y ver exactamente qué hace cada línea en la página.

Esta guía cubre cuatro habilidades prácticas: abrir y usar las DevTools, inspeccionar elementos, registrar y recorrer código DOM paso a paso, y corregir los pocos errores que causan la mayoría de los problemas con el DOM.

Uso de las herramientas de desarrollo del navegador

Inspección del DOM

Las herramientas de desarrollo del navegador son utilidades integradas en los navegadores modernos para inspeccionar y editar el DOM en vivo, depurar JavaScript, supervisar solicitudes de red y medir el rendimiento. Los paneles más útiles para trabajar con el DOM son:

  • Elements (Firefox: Inspector) — el árbol DOM en vivo y el CSS que se aplica a cada nodo.
  • Console — registros, errores y un REPL donde puedes ejecutar JavaScript sobre la página actual.
  • Sources (Firefox: Debugger) — tus scripts, donde puedes establecer puntos de interrupción y recorrer el código.

Un punto clave que confunde a los principiantes: el panel Elements muestra el DOM en vivo, no el HTML que escribiste. Si tu script agrega, elimina o reescribe nodos, el panel Elements refleja el resultado después de que el script se ejecutó, que es exactamente lo que necesitas cuando depuras manipulaciones del DOM.

Cómo abrir las herramientas de desarrollo

  • Chrome: Haz clic derecho en la página y selecciona "Inspeccionar", o presiona Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
  • Firefox: Haz clic derecho en la página y selecciona "Inspeccionar elemento", o presiona Ctrl+Shift+I (Windows/Linux) o Cmd+Opt+I (Mac).
  • Safari: Activa el menú Desarrollador en Preferencias, luego selecciona "Mostrar Inspector Web" desde el menú Desarrollador.

Inspección de elementos

El panel "Elements" te permite inspeccionar y editar el HTML y el CSS de una página web en tiempo real.

<!DOCTYPE html>
<html>
<head>
    <title>Inspecting Elements</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">This is some content.</div>
    <script>
        document.querySelector('.content').classList.add('highlight');
    </script>
</body>
</html>
Pruébalo tú mismo »

Usa el panel Elements (presiona F12 para abrir el Inspector y luego ve a la pestaña Elements) para inspeccionar el elemento <div class="content"> y verificar que la clase .highlight está aplicada.

Depuración de JavaScript que manipula el DOM

Uso de la consola

La consola es la herramienta de depuración más rápida: agrega una sentencia de registro, recarga la página y lee el resultado. Más allá del básico console.log(), varios métodos hacen que la depuración del DOM sea mucho más clara:

  • console.log() — salida general; pasa varios argumentos y se imprimirán uno al lado del otro.
  • console.error() / console.warn() — mensajes con estilo en rojo/amarillo que son fáciles de detectar y pueden filtrarse.
  • console.dir(node) — imprime un nodo del DOM como un objeto JavaScript para que puedas expandir sus propiedades, en lugar de mostrarlo como HTML (que es lo que hace console.log(node)).
  • console.table(data) — muestra arrays y objetos como una tabla ordenable.
  • console.assert(condition, msg) — registra solo cuando la condición es false, ideal para comprobaciones de sanidad.
  • console.count(label) — cuenta cuántas veces se ejecuta una línea, útil para detectar un manejador de eventos que se dispara con demasiada frecuencia.
const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];

console.log('Loaded items:', items.length); // Loaded items: 2
console.table(items);                        // sortable table of both rows
console.assert(items.length > 0, 'No items!'); // silent: condition is true
console.assert(items.length > 5, 'Too few items'); // logs the assertion message

Cuando registres un nodo del DOM, prefiere console.dir(el) para inspeccionar sus propiedades (como el.dataset o el.classList) y console.log(el) para inspeccionar su HTML renderizado: muestran dos vistas diferentes del mismo elemento.

Establecimiento de puntos de interrupción

Los puntos de interrupción te permiten pausar la ejecución de JavaScript en líneas específicas del código para inspeccionar variables y la pila de llamadas.

Cómo establecer puntos de interrupción

  1. Abre el panel "Sources" en Chrome o el panel "Debugger" en Firefox.
  2. Navega hasta el archivo JavaScript que deseas depurar.
  3. Haz clic en el número de línea donde quieres establecer el punto de interrupción.

Cuando la ejecución se pausa, usa los controles de avance: Step over (ejecuta la línea actual), Step into (entra en una función llamada) y Step out (finaliza la función actual). El panel Scope muestra las variables locales y Call Stack muestra cómo llegaste a esa línea.

La sentencia debugger

También puedes pausar desde el propio código. Cuando las DevTools están abiertas, la sentencia debugger; actúa como un punto de interrupción que vive en tu código fuente — muy útil para código que se genera en tiempo de ejecución o que no puedes hacer clic fácilmente en el panel Sources:

function updateTitle(text) {
  debugger; // execution pauses here when DevTools is open
  document.title = text;
}

Si las DevTools están cerradas, debugger no hace nada, por lo que es seguro dejarlo durante el desarrollo (pero elimínalo antes de publicar).

Puntos de interrupción condicionales y logpoints

Para un manejador que se ejecuta muchas veces, haz clic derecho en un número de línea y elige Add conditional breakpoint para pausar solo cuando una expresión sea verdadera (por ejemplo, count > 100). Un logpoint imprime un mensaje sin pausar en absoluto, como un console.log() que puedes agregar sin editar el código fuente.

Ejemplo de depuración de manipulación del DOM

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <div id="content">Hello, World!</div>
    <button id="change-text">Change Text</button>
    <p id="log"></p>

    <script>
        document.getElementById('change-text').addEventListener('click', function() {
            const content = document.getElementById('content');
            const log = document.getElementById('log');
            log.textContent = 'Current text: ' + content.textContent;
            content.textContent = 'Hello, Developer!';
            log.textContent += ' | Updated text: ' + content.textContent;
        });
    </script>
</body>
</html>
Pruébalo tú mismo »

Este ejemplo muestra cómo depurar la manipulación del DOM visualizando los cambios producidos en él.

Problemas comunes y soluciones

Solución de problemas habituales en la manipulación del DOM

  1. Elemento no encontrado

    El error del DOM más frecuente es TypeError: Cannot read properties of null. Significa que un selector devolvió null porque el elemento no existe (un error tipográfico en el id o un selector incorrecto). Verifica siempre el resultado antes de usarlo. Consulta Búsqueda: getElement, querySelector para conocer la diferencia entre los métodos de selección.

const element = document.getElementById('nonexistent');
if (element) {
    element.textContent = 'Found!';
} else {
    document.body.insertAdjacentHTML('beforeend', '<p>Element not found</p>');
}

  1. Temporización incorrecta

    Si un <script> en el <head> se ejecuta antes de que se analice el cuerpo del documento, los elementos que busca aún no existen, lo que produce el mismo error null que el anterior. Ejecuta el código del DOM después de que el documento haya sido analizado escuchando el evento DOMContentLoaded (o colocando el script al final de <body>).

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('content');
    element.textContent = 'DOM fully loaded';
});

  1. CSS no aplicado

    Si un cambio de estilo no tiene efecto visible, confirma en el panel Elements que la clase fue realmente añadida (element.classList) y que ninguna regla más específica la sobreescribe — las DevTools muestran las reglas anuladas con tachado. Relacionado: Manejo de eventos en el DOM.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Not Applied</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">This is visible</div>
    <button id="hide-content">Hide Content</button>

    <script>
        document.getElementById('hide-content').addEventListener('click', function() {
            const content = document.getElementById('content');
            content.classList.add('hidden');
        });
    </script>
</body>
</html>
Pruébalo tú mismo »

Este ejemplo muestra cómo ocultar un elemento de contenido añadiendo la clase .hidden.

Información

Usa el panel "Sources" en las herramientas de desarrollo del navegador para establecer puntos de interrupción y recorrer tu código JavaScript línea por línea. Esto te permite inspeccionar variables, la pila de llamadas y el estado del DOM en cada paso, lo que facilita enormemente la identificación y corrección de errores.

Conclusión

Las herramientas de desarrollo del navegador son indispensables para inspeccionar el DOM, depurar JavaScript y solucionar problemas comunes. Al dominar estas herramientas y técnicas, puedes mejorar significativamente tu flujo de trabajo y crear aplicaciones web más fiables.

Práctica

Práctica
¿Cuáles de las siguientes afirmaciones sobre la depuración y las herramientas para la manipulación del DOM son verdaderas?
¿Cuáles de las siguientes afirmaciones sobre la depuración y las herramientas para la manipulación del DOM son verdaderas?
Was this page helpful?