Chrome DevTools: Elements, Console y Network
Navegue por los paneles Elements, Console y Network para inspeccionar estilos, depurar errores de JavaScript y supervisar solicitudes HTTP.
Chrome DevTools: Elements, Console y Network es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Abrir DevTools de forma eficiente
Haga clic con el botón derecho en cualquier elemento y seleccione Inspect para abrir DevTools con ese elemento seleccionado. F12 muestra u oculta el panel. Cmd+Shift+C (Mac) o Ctrl+Shift+C (Windows) activa directamente el modo de inspección sin abrir el panel completo.
Panel Elements: inspector del DOM
El panel Elements muestra el árbol DOM activo y analizado, no el código fuente HTML sin procesar. Refleja las modificaciones realizadas con JavaScript. Pase el cursor sobre los nodos para resaltarlos en la página. Haga doble clic para editar el HTML directamente.
Paneles Styles y Computed
Con un elemento seleccionado, el panel Styles muestra todas las reglas CSS aplicadas, ordenadas por especificidad. Las reglas tachadas han sido sobrescritas. El panel Computed muestra los valores finales calculados de cada propiedad.
Forzar estados de los elementos
Haga clic en el botón :hov del panel Styles para forzar un estado CSS como :hover, :focus, :active o :visited. Inspeccione los estilos de hover sin tener que mantener el cursor completamente inmóvil.
Visualizador del modelo de caja
El panel Computed muestra un diagrama interactivo del modelo de caja: contenido, padding, borde y margen. Pase el cursor sobre cada región para ver su valor. Haga clic para editar en tiempo real los valores de margin y padding.
Fundamentos de Console: registrar y ejecutar código
La Console muestra errores, advertencias y registros. Escriba cualquier expresión de JavaScript y pulse Intro para evaluarla en la página activa. Utilice la Console como una REPL interactiva para probar fragmentos de código al instante.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Métodos de la API de Console
Además de console.log: console.warn() (advertencia amarilla), console.error() (rojo), console.table() (muestra un array u objeto como tabla), console.group() / console.groupEnd() para agrupar resultados y console.time() para medir tiempos.
Descripción general del panel Network
Cada solicitud HTTP (HTML, JS, CSS, imágenes, XHR y Fetch) aparece en una fila. Las columnas muestran el método, el estado, el tamaño y la duración. Haga clic en una fila para ver todos los detalles de la solicitud y la respuesta.
Filtrar solicitudes de red
Utilice la barra de filtros para buscar por URL o filtrar por tipo: All, XHR/Fetch, JS, CSS, Img, Media, Font y WS. El filtro XHR/Fetch resulta especialmente útil al depurar llamadas a API desde JavaScript.
Inspeccionar la solicitud y la respuesta
Seleccione una solicitud de red para ver: Headers (de la solicitud y la respuesta), Preview (JSON/HTML con formato), Response (cuerpo sin procesar) y Timing (fases de la conexión). La pestaña Payload muestra los parámetros del cuerpo de POST.
Limitación: simular redes lentas
Haga clic en el menú desplegable de limitación (valor predeterminado: No throttling) para simular Slow 3G, Fast 3G u Offline. La casilla Disable cache impide que el navegador utilice recursos almacenados en caché durante las pruebas.
Comprobación rápida
¿En qué sección de Chrome DevTools puede ver todas las reglas CSS aplicadas a un elemento seleccionado, incluidas las sobrescritas?
Resumen: paneles de Chrome DevTools
Elements: inspeccione y edite el DOM y el CSS activos. Fuerce pseud estados para inspeccionar los estilos de hover. Console: registre, depure y ejecute JavaScript en tiempo real. Network: supervise todas las solicitudes HTTP, inspeccione las cabeceras y las respuestas, y simule conexiones lentas.
Preguntas frecuentes
¿La lección «Chrome DevTools: Elements, Console y Network» es gratis?
Sí — el texto completo de «Chrome DevTools: Elements, Console y Network» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Chrome DevTools: Elements, Console y Network»?
Navegue por los paneles Elements, Console y Network para inspeccionar estilos, depurar errores de JavaScript y supervisar solicitudes HTTP. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Chrome DevTools: Elements, Console y Network»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Chrome DevTools: Elements, Console y Network
- VSCode: extensiones, Emmet y atajos
- Configuración de Prettier y ESLint
- Compatibilidad de navegadores y caniuse.com