04. Diagnóstico responsivo con Chrome DevTools

¿Qué aprenderás?

En este tutorial aprenderemos a utilizar Chrome DevTools, las herramientas para desarrolladores de Google Chrome, para inspeccionar y diagnosticar el comportamiento responsivo de un sitio web.

Aplicaremos estos conocimientos al portafolio profesional UX/UI desarrollado con WordPress, Blocksy y Gutenberg.

El objetivo es aprender a identificar problemas visuales y técnicos antes de comenzar a corregirlos.

Objetivos de aprendizaje

Al finalizar esta lección podrás:

Comprender qué es Chrome DevTools y para qué se utiliza.
Abrir y reconocer las principales herramientas de inspección.
Identificar elementos HTML de una página web.
Examinar propiedades CSS y comprender el modelo de caja.
Activar el modo de dispositivos y modificar el tamaño de pantalla.
Detectar problemas de navegación, distribución y visualización.
Identificar posibles causas de desbordamientos horizontales.
Relacionar los problemas detectados con Blocksy o Gutenberg.
Documentar un diagnóstico responsivo del portafolio UX/UI.

Nivel: Inicial.
Herramientas: Google Chrome, Chrome DevTools, WordPress, Blocksy, Gutenberg y Figma.
Requisito previo: Haber estudiado los fundamentos del diseño responsivo.
Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.

1. ¿Qué es Chrome DevTools?

Chrome DevTools es un conjunto de herramientas integradas en Google Chrome que permite analizar el funcionamiento y la estructura de una página web.

Los desarrolladores las utilizan para inspeccionar elementos HTML, revisar estilos CSS, ejecutar pruebas y encontrar problemas técnicos.

En nuestro proyecto utilizaremos principalmente tres herramientas:

Herramienta	Función
Elements	Inspeccionar la estructura HTML
Styles y Computed	Analizar las propiedades CSS
Device Toolbar	Simular diferentes tamaños de pantalla

También conoceremos la consola de JavaScript para realizar una comprobación sencilla de desbordamiento horizontal.

¿Por qué es importante para un diseñador UX/UI?

Porque permite analizar cómo se comporta realmente una interfaz después de implementarla.

Un prototipo diseñado en Figma representa una propuesta visual e interactiva.

Sin embargo, el sitio implementado puede presentar diferencias debido al contenido real, las configuraciones de WordPress, las propiedades CSS y el tamaño de pantalla.

Chrome DevTools nos ayudará a detectar esas diferencias de forma sistemática.

Documentación oficial

Descripción general de Chrome DevTools

2. Preparar nuestro entorno de trabajo

Antes de comenzar, necesitamos abrir el sitio que vamos a analizar.

Puedes utilizar la instalación local de WordPress o un entorno de desarrollo al que tengas acceso.

Recomendación: realiza las pruebas sobre una versión de desarrollo de tu portafolio, evitando modificar directamente un sitio en producción.

Abrir el portafolio profesional

Abre Google Chrome.

Ingresa a la dirección de tu instalación de WordPress.

Visualiza la página de inicio del portafolio.

Antes de abrir las herramientas, identifica sus elementos principales:

Encabezado y logotipo.
Menú de navegación.
Presentación profesional.
Sección de proyectos.
Botones y enlaces.
Pie de página.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 01. Portafolio profesional en Google ChromeCaptura pendiente: página de inicio del portafolio UX/UI.

Resultado esperado:Visualizas el sitio web que analizarás durante el tutorial.

3. Abrir Chrome DevTools

Chrome permite abrir las herramientas de desarrollo de diferentes maneras.

Una de las más sencillas consiste en utilizar el menú contextual del navegador.

Abrir las herramientas para desarrolladores

En la página del portafolio, haz clic derecho sobre un elemento.

Selecciona Inspeccionar.

Se abrirá Chrome DevTools, generalmente en la parte lateral o inferior de la ventana.

También puedes utilizar estos atajos:

macOS: Cmd + Option + I.
Windows o Linux: Ctrl + Shift + I.

Identifica el panel Elements, donde se muestra la estructura HTML.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 02. Chrome DevToolsCaptura pendiente: navegador con el panel DevTools abierto.

Resultado esperado:Se abre el panel Chrome DevTools y puedes visualizar la estructura de la página.

¿Qué estamos observando?

La página web está construida mediante elementos HTML.

Aunque trabajemos visualmente con WordPress y Gutenberg, el navegador interpreta una estructura de código para mostrar su contenido.

Chrome DevTools permite examinar esa estructura.

4. Inspeccionar elementos HTML

HTML es el lenguaje que define la estructura y organización del contenido de una página web.

Por ejemplo:

<h1>Diseñador UX/UI</h1>
<p>Creo experiencias digitales centradas en las personas.</p>
<a href="/proyectos/">Ver proyectos</a>

En este ejemplo:

h1 representa un encabezado principal.
p representa un párrafo.
a representa un enlace.

WordPress y Gutenberg generan elementos HTML a partir de los bloques que utilizamos.

Inspeccionar un elemento del portafolio

Con DevTools abierto, activa la herramienta Seleccionar un elemento.

Su icono representa un cursor sobre un elemento.

También puedes utilizar:

macOS: Cmd + Shift + C.
Windows o Linux: Ctrl + Shift + C.

Haz clic sobre el título principal del portafolio.

Observa cómo DevTools identifica el elemento dentro del árbol HTML.

Después repite el procedimiento con una imagen y un botón.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 03. Inspección de elementos HTMLCaptura pendiente: selección de un título y su representación en el panel Elements.

Resultado esperado:Identificas el elemento HTML correspondiente a un contenido visible.

Ejercicio de observación

Identifica qué etiquetas HTML utiliza tu sitio para presentar:

El título principal.
Un párrafo de presentación.
Un enlace de navegación.
Una imagen.
Un botón o enlace con apariencia de botón.

Recuerda que su apariencia visual no siempre permite identificar directamente qué elemento HTML se utilizó.

5. Analizar las propiedades CSS

CSS es el lenguaje utilizado para definir la presentación visual de los elementos HTML.

Controla aspectos como los colores, tamaños, tipografías, márgenes y distribución del contenido.

En Chrome DevTools podemos revisar estas propiedades desde el panel Styles.

Ejemplo conceptual

.titulo-portafolio {
  color: #222222;
  font-size: 2rem;
  margin-bottom: 1rem;
}

En este ejemplo:

color modifica el color del texto.
font-size modifica su tamaño.
margin-bottom controla el espacio exterior inferior.

Estas propiedades pueden generarse desde el tema, los bloques o estilos personalizados.

Revisar los estilos de un elemento

Selecciona un título o una tarjeta del portafolio.

En DevTools, abre el panel Styles.

Observa las propiedades CSS aplicadas.

Busca valores relacionados con:

Color.
Tamaño de fuente.
Márgenes.
Espaciado interior.
Ancho.
Alto.

Revisa también la pestaña Computed, que muestra los valores de estilo calculados por el navegador.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 04. Panel Styles y propiedades CSSCaptura pendiente: elemento seleccionado con sus propiedades CSS.

Resultado esperado:Identificas propiedades CSS que afectan la apariencia del elemento seleccionado.

Importante: cambios temporales

Chrome DevTools permite editar propiedades CSS directamente desde el navegador.

Sin embargo, esos cambios son normalmente temporales y no modifican automáticamente WordPress.

Al recargar la página, suelen perderse las modificaciones realizadas únicamente en DevTools.

Para aplicar cambios permanentes, debemos utilizar las herramientas correspondientes de Blocksy, Gutenberg o los archivos de estilos del proyecto.

Documentación oficial

Referencia de herramientas CSS — Chrome DevTools

6. Comprender el modelo de caja

Los elementos HTML pueden analizarse mediante el modelo de caja o Box Model.

Este modelo describe el espacio que ocupa un elemento y sus separaciones.

Sus partes principales son:

Propiedad	Función
Content	Área donde se muestra el contenido
Padding	Espacio interior
Border	Borde del elemento
Margin	Espacio exterior

Ejemplo aplicado

Imagina una tarjeta que muestra uno de los proyectos UX/UI del portafolio.

La tarjeta tiene una imagen, un título y una descripción.

Si estos elementos están demasiado juntos, podríamos necesitar aumentar el padding.

Si las tarjetas están demasiado cerca entre sí, podríamos necesitar revisar el espacio exterior o el gap del contenedor.

Inspeccionar el modelo de caja

Selecciona una tarjeta de proyecto o un contenedor del portafolio.

En DevTools, abre el panel Computed o la visualización del modelo de caja disponible desde Styles.

Identifica sus dimensiones y los valores de margen, borde y espaciado interior.

Observa cómo el navegador representa visualmente estas áreas.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 05. Modelo de cajaCaptura pendiente: visualización del Box Model en Chrome DevTools.

Resultado esperado:Reconoces las dimensiones y separaciones del elemento seleccionado.

Pregunta de análisis

Si una sección tiene demasiado espacio entre el borde del contenedor y su contenido, ¿qué propiedad deberíamos revisar primero?

Respuesta esperada: el espaciado interior o padding.

7. Activar el modo de dispositivos

Una de las herramientas más útiles para nuestro proyecto es Device Toolbar.

Permite simular diferentes tamaños de viewport y analizar cómo responde la interfaz.

Es importante comprender que este modo ofrece una aproximación: no reemplaza las pruebas en teléfonos y tabletas reales.

Activar la barra de dispositivos

Con Chrome DevTools abierto, identifica el botón Toggle device toolbar.

Generalmente utiliza un icono que representa dispositivos.

Haz clic para activar la vista de dispositivos.

También puedes utilizar:

macOS: Cmd + Shift + M.
Windows o Linux: Ctrl + Shift + M.

En el selector de dimensiones, utiliza el modo Responsive.

Comprueba que puedes modificar el ancho del viewport.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 06. Device Toolbar activadoCaptura pendiente: modo Responsive de Chrome DevTools.

Resultado esperado:Visualizas la página dentro de un viewport cuyo tamaño puedes modificar.

Documentación oficial

Simular dispositivos móviles — Chrome DevTools

8. Realizar pruebas con diferentes anchos

Ahora revisaremos cómo responde nuestro portafolio en distintas dimensiones.

Para esta actividad utilizaremos tres anchos ilustrativos.

Prueba	Ancho del viewport
Pantalla estrecha	360 px
Pantalla intermedia	768 px
Pantalla amplia	1280 px

Estos valores son referencias para el ejercicio, no breakpoints obligatorios de Blocksy o Gutenberg.

¿Qué debemos observar?

En cada dimensión comprueba:

Si el menú se adapta correctamente.
Si las imágenes mantienen sus proporciones.
Si los textos son legibles.
Si las columnas se reorganizan.
Si existen contenidos cortados.
Si aparecen desplazamientos horizontales innecesarios.

Comparar tres tamaños de pantalla

En Device Toolbar, selecciona el modo Responsive.

Establece un ancho de 360 píxeles.

Observa la página completa.

Repite la prueba con 768 píxeles y 1280 píxeles.

Registra al menos una observación para cada dimensión.

Si una sección comienza a presentar problemas entre dos tamaños, modifica progresivamente el ancho para identificar cuándo aparece el problema.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 07. Comparación entre tamaños de pantallaCaptura pendiente: pruebas del portafolio a 360, 768 y 1280 píxeles.

Resultado esperado:Registras cómo cambia la presentación del portafolio entre diferentes anchos.

Ejemplo de observación

Pantalla estrecha: el menú debe permitir acceder a las páginas del portafolio sin dificultar la navegación.

Pantalla intermedia: las tarjetas de proyectos deben mantener una distribución adecuada y textos legibles.

Pantalla amplia: los contenidos deben aprovechar el espacio sin extenderse excesivamente.

Estos son criterios para analizar, no resultados garantizados de la implementación actual.

9. Diagnosticar navegación, columnas e imágenes

Un sitio puede verse correctamente en escritorio y presentar problemas en pantallas pequeñas.

Por eso debemos analizar sus componentes individualmente.

Encabezado

Revisa:

Visibilidad del logotipo.
Funcionamiento del menú.
Espaciado entre elementos.
Tamaño de botones.
Posibles superposiciones.

Sección de proyectos

Revisa:

Número de columnas.
Espacio entre tarjetas.
Proporción de imágenes.
Longitud de los títulos.
Ubicación de los botones.

Pie de página

Revisa:

Distribución de columnas.
Legibilidad de enlaces.
Espaciado.
Información de contacto.
Posibles elementos que sobresalen del contenedor.

Inspeccionar componentes del portafolio

Utiliza Device Toolbar para simular una pantalla estrecha.

Comienza revisando el encabezado.

Abre y cierra el menú móvil.

Después desplázate hasta la sección de proyectos y revisa su distribución.

Finalmente, analiza el footer.

Para cada sección registra:

Elemento observado.
Problema detectado, si existe.
Tamaño de pantalla.
Posible causa.
Herramienta que utilizarías para corregirlo.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 08. Diagnóstico de componentesCaptura pendiente: análisis responsivo del encabezado, los proyectos o el footer.

Resultado esperado:Identificas problemas de presentación en al menos tres secciones.

10. Detectar desbordamientos horizontales

Uno de los problemas más frecuentes del diseño responsivo aparece cuando un elemento ocupa más ancho que el espacio disponible.

Esto puede provocar que el usuario deba desplazarse horizontalmente para visualizar el contenido.

Posibles causas

Imágenes con dimensiones fijas demasiado grandes.
Contenedores con anchos excesivos.
Elementos con márgenes inadecuados.
Columnas que no se reorganizan.
Textos largos que no pueden dividirse.
Configuraciones de min-width.

Ejemplo conceptual

Considera el siguiente CSS:

.imagen {
  width: 900px;
}

Si su contenedor es más estrecho, la imagen puede sobresalir.

Una alternativa adaptable, dependiendo de la composición, sería:

.imagen {
  max-width: 100%;
  height: auto;
}

La solución real debe determinarse analizando el problema y el comportamiento del contenedor.

Comprobar si existe desbordamiento horizontal

Activa Device Toolbar.

Configura un ancho estrecho, por ejemplo 360 píxeles.

Revisa si el sitio permite desplazarse horizontalmente sin que esa interacción forme parte del diseño.

Si necesitas una comprobación adicional, abre la pestaña Console y escribe esta expresión:

document.documentElement.scrollWidth >
  document.documentElement.clientWidth

Presiona Enter.

Si devuelve true: el ancho desplazable del documento supera el ancho visible en ese momento.

Si devuelve false: no se detecta esa diferencia mediante esta comprobación. Eso no garantiza que todos los elementos estén correctamente adaptados.

Si encuentras un problema, utiliza el inspector de elementos para examinar el contenedor y sus propiedades CSS.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 09. Diagnóstico de desbordamientoCaptura pendiente: viewport estrecho y comprobación del ancho del documento en DevTools.

Resultado esperado:Determinas si la página presenta un ancho de contenido mayor que el viewport.

Precaución al utilizar la consola

Ejecuta solamente instrucciones que comprendas y que provengan de fuentes confiables.

Para este ejercicio utilizamos una expresión de lectura que consulta dimensiones del documento y no modifica el sitio.

Documentación oficial

Ejecutar JavaScript en la consola — Chrome DevTools

11. Relacionar los problemas con Blocksy y Gutenberg

Una vez identificado un problema, debemos determinar dónde corresponde realizar la corrección.

No todas las modificaciones se realizan desde la misma herramienta.

Problema observado	Herramienta probable
Menú móvil mal organizado	Header de Blocksy
Footer desordenado	Footer Builder de Blocksy
Colores globales inconsistentes	Opciones globales de Blocksy
Columnas de una página comprimidas	Gutenberg
Imagen mal ajustada dentro de una sección	Bloque Imagen o contenedor en Gutenberg
Ancho general del contenido	Opciones de diseño de Blocksy
Espaciado particular de una sección	Ajustes del bloque o estilos correspondientes

Esta tabla representa una guía inicial. El diagnóstico real debe comprobar qué elemento y qué regla están provocando el problema.

Ejemplo aplicado

Imagina que las tarjetas de proyectos se muestran correctamente en escritorio, pero permanecen demasiado estrechas en móvil.

Antes de modificar el sitio deberíamos:

Identificar el contenedor.
Inspeccionar sus propiedades.
Comprobar cómo están organizadas las columnas.
Revisar la configuración del bloque correspondiente.
Probar la corrección en una página de desarrollo.

La secuencia es:

Observar → Diagnosticar → Identificar la herramienta → Corregir → Verificar.

12. Documentar el diagnóstico

Los desarrolladores deben aprender a registrar los problemas encontrados y las soluciones propuestas.

Esto facilita la colaboración, el seguimiento y la validación de los cambios.

Elaborar un registro de diagnóstico responsivo

Selecciona al menos tres problemas reales de tu portafolio.

Para cada uno registra:

Página o sección afectada.
Ancho del viewport donde aparece.
Descripción del problema.
Evidencia visual.
Posible causa.
Herramienta de corrección.
Prioridad de intervención.

Cuando no encuentres un problema en una sección, puedes registrar la comprobación satisfactoria.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 10. Registro de diagnóstico responsivoCaptura pendiente: ejemplo de tabla de problemas y evidencias del portafolio.

Resultado esperado:Dispones de un registro de problemas, evidencias y propuestas de solución.

13. Actividad práctica

Diagnóstico responsivo del portafolio UX/UI

En esta actividad aplicarás los conocimientos aprendidos para identificar problemas de visualización en tu proyecto.

Parte A. Inspección

Abre tu portafolio en Google Chrome y activa DevTools.

Revisa al menos las siguientes secciones:

Encabezado y navegación.
Portada o presentación profesional.
Proyectos destacados.
Pie de página.

Parte B. Pruebas responsivas

Realiza pruebas en los siguientes anchos:

360 px.
768 px.
1280 px.

Observa cómo cambia el diseño.

Si aparecen problemas entre esos tamaños, realiza pruebas adicionales para identificar cuándo ocurren.

Parte C. Registro de hallazgos

Completa una tabla como esta:

Sección	Ancho	Hallazgo	Posible causa	Herramienta	Prioridad
Header	360 px	Ejemplo: menú superpuesto	Espaciado insuficiente	Blocksy	Alta
Proyectos	Completar	Completar	Completar	Completar	Completar
Footer	Completar	Completar	Completar	Completar	Completar

Prioridad alta: problemas que impiden utilizar una funcionalidad o acceder a información importante.

Prioridad media: problemas que dificultan la lectura o interacción.

Prioridad baja: detalles visuales menores que no impiden utilizar el sitio.

Parte D. Evidencias

Para cada problema registra una captura donde se identifique la sección afectada.

Indica el ancho del viewport y describe brevemente el problema.

Cuando sea posible, compara el resultado con el prototipo correspondiente de Figma.

Parte E. Propuesta de solución

Indica qué modificarías y por qué.

Diferencia los ajustes que corresponden a Blocksy de aquellos que deben realizarse desde Gutenberg.

Importante: esta actividad está orientada al diagnóstico. No es obligatorio corregir todos los problemas en esta etapa.

Las correcciones se abordarán en los tutoriales posteriores.

Resultado esperado

Al finalizar deberás contar con un registro técnico de los principales hallazgos de diseño responsivo de tu portafolio.

Esta actividad prepara el trabajo de ajuste responsivo de la Unidad III y no reemplaza la pauta oficial de evaluación.

14. Lista de verificación

Lista de verificación

Marca las actividades que hayas completado.

Tu progreso0 de 10 completados

15. Documentación oficial

Para profundizar en los contenidos revisa:

Próximo tutorial

En el siguiente tutorial comenzaremos a trabajar en la configuración global de Blocksy.

Aprenderemos a controlar los colores, las tipografías, los contenedores, los anchos y los espaciados del sitio.

Utilizaremos los problemas identificados durante el diagnóstico como referencia para tomar decisiones de diseño y realizar ajustes en nuestro portafolio profesional UX/UI.