Dominio de DevTools del Navegador

DevTools: Tu herramienta de testing más poderosa #

DevTools del navegador es la herramienta más valiosa en el arsenal de un tester web. Te permite ver todo lo que sucede bajo la superficie — requests de red, errores JavaScript, cambios en el DOM, datos de almacenamiento, métricas de performance y más.

Todos los navegadores principales incluyen DevTools: Chrome DevTools (F12), Firefox Developer Tools, Safari Web Inspector y Edge DevTools. Esta lección se enfoca en Chrome DevTools porque es el más utilizado, pero los conceptos aplican a todos los navegadores.

Abriendo DevTools #

Hay múltiples formas de abrir DevTools:

• F12 o Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
• Clic derecho en cualquier elemento y seleccionar “Inspeccionar”
• Menú de Chrome > Más herramientas > Herramientas para desarrolladores

Una vez abierto, puedes acoplar DevTools abajo, a la derecha, a la izquierda o como ventana separada. Para testing, acoplarlo a la derecha suele ser lo más práctico porque puedes ver la página y las herramientas simultáneamente.

La pestaña Elements #

La pestaña Elements muestra el árbol DOM vivo y todos los estilos CSS aplicados a cada elemento.

Inspeccionando elementos #

Haz clic derecho en cualquier elemento de la página y selecciona “Inspeccionar” para saltar directamente a él en el árbol DOM. Desde aquí puedes:

• Ver la estructura HTML — ver relaciones padre-hijo, atributos y contenido de texto
• Editar HTML en vivo — doble clic en cualquier atributo o texto para modificarlo temporalmente
• Eliminar elementos — seleccionar y presionar Delete para remover elementos y ver cómo la página se reorganiza
• Buscar en el DOM — presionar Ctrl+F en el panel Elements para buscar por nombre de tag, atributo, texto o selector CSS

Inspeccionando estilos #

El panel Styles a la derecha muestra todas las reglas CSS aplicadas al elemento seleccionado, en orden de especificidad. Puedes:

• Alternar propiedades — clic en el checkbox para deshabilitar/habilitar cualquier propiedad CSS
• Editar valores — clic en cualquier valor para cambiarlo en tiempo real
• Agregar nuevas propiedades — clic en espacio vacío dentro de una regla para agregar nuevo CSS
• Ver valores computados — cambiar a la pestaña “Computed” para ver los valores finales calculados después de aplicar todas las reglas CSS
• Forzar estados del elemento — clic en el botón :hov para alternar estados :hover, :active, :focus, :visited

Visualización del Box Model #

En la parte inferior del panel Styles (o en la pestaña Computed), ves una representación visual del box model — content, padding, border y margin con valores exactos en píxeles. Esto es esencial para diagnosticar bugs de layout.

La pestaña Console #

La Console es donde aparecen los errores JavaScript y donde puedes ejecutar comandos JavaScript.

Leyendo mensajes de la consola #

Los mensajes están codificados por color:

• Rojo (Errores): Excepciones JavaScript, requests de red fallidos, violaciones de seguridad
• Amarillo (Advertencias): Avisos de deprecación, advertencias de performance, problemas no críticos
• Azul (Info): Mensajes informativos de la aplicación
• Gris (Verbose): Mensajes de debugging detallados

Cada mensaje de error rojo es potencialmente un bug que vale la pena investigar.

Comandos útiles de consola para testing #

// Contar todos los elementos de un tipo específico
document.querySelectorAll('button').length

// Encontrar elementos por contenido de texto
[...document.querySelectorAll('*')].filter(el =>
  el.textContent.includes('Texto de búsqueda')
)

// Verificar si un elemento es visible
const el = document.querySelector('.my-element');
const style = window.getComputedStyle(el);
console.log('Display:', style.display, 'Visibility:', style.visibility);

// Monitorear eventos en un elemento
monitorEvents(document.querySelector('#myButton'), 'click');

// Tomar screenshot de página completa
// Ctrl+Shift+P > "Capture full size screenshot"

// Limpiar consola
console.clear()

Filtrado de la consola #

Usa los filtros del dropdown para mostrar solo Errores, Advertencias, Info o mensajes Verbose. También puedes filtrar por texto usando la caja de búsqueda. Al hacer testing, comienza filtrando solo Errores — estos tienen la prioridad más alta.

La pestaña Network #

La pestaña Network es donde monitoreas todo el tráfico HTTP entre el navegador y los servidores.

Entendiendo la lista de requests #

Cada fila representa un HTTP request. Columnas clave:

• Name: La ruta URL o nombre del archivo
• Status: Código de status HTTP (200, 404, 500, etc.)
• Type: Document, Script, Stylesheet, XHR/Fetch, Image, etc.
• Size: Tamaño de transferencia y tamaño real
• Time: Cuánto tardó el request
• Waterfall: Timeline visual del request

Filtrando requests #

Usa los botones de filtro para mostrar tipos específicos de request:

• XHR/Fetch: Llamadas API — aquí es donde la mayoría de los bugs del backend son visibles
• JS: Archivos JavaScript
• CSS: Archivos de hojas de estilo
• Img: Imágenes
• Doc: Documentos HTML

Inspeccionando un request #

Haz clic en cualquier request para ver sus detalles:

• Headers: Headers de request y response, incluyendo cookies, tipo de contenido y tokens de autenticación
• Payload: Los datos enviados en requests POST/PUT (form data o JSON)
• Preview: Una vista formateada del response (JSON renderizado como árbol)
• Response: El cuerpo del response sin formato
• Timing: Desglose del tiempo de DNS, conexión, TLS, espera y descarga

Throttling de red #

El dropdown de throttle te permite simular conexiones lentas. Prueba con:

• Fast 3G: Conexión móvil típica
• Slow 3G: Conexión móvil deficiente
• Offline: Sin conectividad

Esto revela bugs que solo aparecen bajo condiciones de red lentas — spinners de carga que nunca desaparecen, data races, manejo de timeouts.

Preservando logs #

Marca “Preserve log” para mantener los requests de red a través de navegaciones de página. Esto es crítico para probar:

• Flujos de login (los redirects borran el log por defecto)
• Envíos de formularios que redirigen
• Wizards de múltiples pasos

La pestaña Application #

La pestaña Application (llamada Storage en Firefox) revela el almacenamiento de datos del lado del cliente.

Cookies #

Ver, editar y eliminar cookies del dominio actual. Cosas clave para probar:

• Cookies de sesión: ¿Expiran cuando se cierra el navegador?
• Cookies persistentes: ¿El tiempo de expiración es razonable?
• Flag Secure: ¿Las cookies sensibles están marcadas como Secure (solo HTTPS)?
• Flag HttpOnly: ¿Las cookies de autenticación son HttpOnly (no accesibles por JavaScript)?
• SameSite: ¿Está configurado el atributo SameSite para prevenir CSRF?

Local Storage y Session Storage #

Ver pares clave-valor almacenados en el navegador:

• localStorage: Persiste hasta que se borra explícitamente
• sessionStorage: Se borra cuando se cierra la pestaña

Prueba qué sucede cuando eliminas manualmente items del storage — ¿la aplicación maneja datos faltantes correctamente?

Service Workers #

Si la aplicación usa service workers (para soporte offline o notificaciones push), puedes inspeccionarlos aquí. Prueba:

• ¿La aplicación funciona offline?
• ¿Los recursos en caché se actualizan cuando el servidor tiene versiones nuevas?
• ¿Las notificaciones push llegan correctamente?

La pestaña Performance #

Graba un trace de performance para analizar la carga de página y el performance en tiempo de ejecución.

Grabando un trace #

1. Clic en el botón Record (o Ctrl+E)
2. Realiza la acción que quieres medir
3. Detén la grabación

El trace muestra:

• Frames por segundo (FPS): Caídas debajo de 60 indican jank
• Uso de CPU: Picos indican procesamiento pesado
• Requests de red: Timeline de todos los requests durante la grabación
• Actividad del hilo principal: Ejecución de JavaScript, layout, paint y compositing

Escenarios de testing de performance #

Usa grabación de performance para probar:

• Tiempo de carga de página: Graba desde la navegación inicial
• Performance de scroll: Graba mientras haces scroll en listas largas
• Suavidad de animaciones: Graba durante animaciones CSS o JavaScript
• Envío de formulario: Graba el ciclo completo de envío a response

Técnicas avanzadas de DevTools #

Emulación de dispositivos #

Presiona Ctrl+Shift+M para alternar la emulación de dispositivos. Esto te permite:

• Seleccionar perfiles de dispositivos específicos (iPhone, Pixel, iPad)
• Establecer dimensiones de pantalla personalizadas
• Simular eventos touch
• Cambiar device pixel ratio
• Emular geolocalización
• Simular orientación del dispositivo

Breakpoints en la pestaña Sources #

Aunque es principalmente para developers, conocer los breakpoints ayuda a QA:

• DOM breakpoints: Clic derecho en un elemento > “Break on” > modificaciones del subárbol, modificaciones de atributos o eliminación de nodos. El debugger se pausa cuando el DOM cambia, ayudándote a capturar bugs dinámicos.
• XHR breakpoints: En la pestaña Sources, agrega un breakpoint que se dispara cuando se hace fetch de una URL específica. Útil para depurar problemas de llamadas API.
• Event listener breakpoints: Pausa en tipos de eventos específicos (click, submit, keypress) para entender el comportamiento de la aplicación.

Ejercicio: Investigación completa con DevTools #

Elige una aplicación web y realiza este checklist de investigación:

1. Pestaña Elements: Encuentra la navegación principal. ¿Está usando tags semánticos <nav>? Verifica todos los links por atributos href válidos.
2. Pestaña Console: Nota todos los mensajes de error. Para cada error, determina si es un bug real o un problema de script de terceros.
3. Pestaña Network: Filtra por XHR/Fetch. Identifica todos los endpoints API que la página llama. Nota cualquier request fallido (4xx/5xx).
4. Pestaña Application: Verifica cookies por flags de seguridad (Secure, HttpOnly, SameSite). Verifica localStorage por datos sensibles que no deberían estar ahí.
5. Pestaña Performance: Graba una carga de página. Nota el tiempo total de carga y el tiempo del largest content paint (LCP).

Documenta los hallazgos en una tabla:

Puntos clave #

• DevTools es la herramienta más poderosa para web testing — aprende a usarla a fondo
• La pestaña Elements revela el DOM vivo y CSS; úsala para investigar bugs visuales
• La Console muestra errores JavaScript que los usuarios nunca ven pero que indican bugs reales
• La pestaña Network expone toda la comunicación API — filtra por XHR para enfocarte en llamadas backend
• La pestaña Application revela almacenamiento del lado del cliente; verifica cookies por flags de seguridad
• La emulación de dispositivos te permite probar comportamiento responsivo sin dispositivos físicos
• Preserva logs a través de navegaciones de página cuando pruebes flujos de múltiples pasos