Herramientas para desarrolladores: abrir y usar DevTools

Todos los navegadores modernos incluyen un conjunto integrado de herramientas para desarrolladores. DevTools permite inspeccionar HTML y CSS, depurar JavaScript, analizar el rendimiento, supervisar las solicitudes de red y mucho más, todo sin salir del navegador.

Abra DevTools con F12 (Windows/Linux) o Cmd+Option+I (Mac). También puede hacer clic derecho en cualquier elemento y elegir Inspect. El atajo Ctrl+Shift+J / Cmd+Option+J abre directamente la Console.

El panel Elements muestra el árbol DOM activo. Haga clic en cualquier elemento para seleccionarlo y ver sus estilos calculados en el panel Styles. Puede hacer doble clic para editar valores de HTML o CSS en tiempo real; los cambios son instantáneos, pero no se guardan en el archivo.

En el panel Styles, haga clic en cualquier valor de propiedad para cambiarlo. Añada nuevas reglas con el botón +. Utilice las casillas de alternancia para desactivar reglas. Es la forma más rápida de crear prototipos de CSS sin cambiar de editor.

La Console muestra mensajes registrados, advertencias y errores. También puede escribir JavaScript directamente y ejecutarlo. Utilice console.log(), console.warn(), console.error() y console.table() para mostrar datos durante la depuración.

El panel Network muestra cada solicitud HTTP que realiza la página. Seleccione una solicitud para ver sus encabezados, previsualizar el cuerpo de la respuesta y consultar la cascada de tiempos. Filtre por tipo: XHR/Fetch, JS, CSS, Images, Fonts.

Cada solicitud muestra: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB) y Content Download. TTFB (Time To First Byte) refleja el tiempo de respuesta del servidor.

Utilice el selector de limitación de velocidad del panel Network para simular condiciones de 3G lento o sin conexión. Esto revela problemas de rendimiento que no se perciben con una conexión de banda ancha rápida y le ayuda a crear experiencias que funcionen para usuarios con conexiones deficientes.

Haga clic en el icono de dispositivo (Ctrl+Shift+M / Cmd+Shift+M) para entrar en Device Mode. Simule ventanas gráficas móviles, DPR, eventos táctiles y condiciones de red. Elija entre preajustes como iPhone 14 o establezca un ancho personalizado.

El panel Sources permite leer y establecer puntos de interrupción en sus archivos JavaScript. Un punto de interrupción pausa la ejecución para que pueda inspeccionar los valores de las variables y la pila de llamadas, y avanzar por el código línea a línea con F10 (step over) y F11 (step into).

Añada un punto de interrupción haciendo clic en un número de línea en Sources. Cuando la ejecución se pause, coloque el cursor sobre las variables para ver sus valores o escríbalas en Console. Utilice el panel Pila de llamadas para ver qué funciones condujeron hasta este punto.

¿Qué panel de DevTools muestra todas las solicitudes HTTP que realiza la página, incluidos sus códigos de estado y tiempos de respuesta?

Elements: inspeccione y edite el DOM en vivo. Console: registre información y ejecute JavaScript. Network: supervise el tráfico HTTP. Sources: establezca puntos de interrupción y depure. Device Mode: pruebe diseños adaptables. Dominar estos cuatro paneles transformará su flujo de trabajo de depuración.