DevTools es una de las herramientas más útiles para QA web. Revela lo que ocurre realmente en el navegador detrás de la pantalla visible: qué solicitudes se enviaron, qué devolvió el servidor, qué errores de JavaScript ocurrieron, qué contienen cookies y almacenamiento, por qué no se puede pulsar un elemento y qué capa está cubriendo la interfaz.
Muchos principiantes abren DevTools solo cuando algo falla. Funciona, pero mantenerlas abiertas durante las pruebas habituales es una costumbre más sólida. Detectas antes las señales inusuales y empiezas las investigaciones con más evidencias que «simplemente parece roto».
Por qué DevTools importa a QA
El principal valor de DevTools es la rapidez con la que ayuda a identificar la capa responsable de un defecto.
El mismo síntoma, «el formulario no se guarda», puede significar cosas muy distintas:
- →El botón está inactivo por el estado del DOM.
- →No se ejecutó un controlador de eventos.
- →No se envió ninguna solicitud.
- →La solicitud se envió, pero el servidor devolvió un error.
- →La respuesta fue correcta, pero la UI no se actualizó.
- →Los datos se guardaron, pero la página muestra un estado obsoleto.
- →Aparece un error en la consola que el usuario no puede ver.
Sin DevTools, todo parece el mismo defecto. Con DevTools, un ingeniero de QA puede identificar una línea de investigación en un minuto.
Los paneles más útiles para QA
No necesitas conocer con la misma profundidad todas las partes de DevTools. Unos pocos paneles aportan la mayor utilidad diaria.
- →Elements: inspeccionar DOM, atributos, clases, elementos ocultos, estados deshabilitados, distribución y estilos.
- →Network: inspeccionar solicitudes, respuestas, encabezados, cuerpos, tiempos, redirecciones y caché.
- →Console: identificar errores de JavaScript, advertencias y problemas de ejecución.
- →Application: inspeccionar cookies, localStorage, sessionStorage, service workers y estado de la aplicación en el navegador.
- →Sources: localizar fallos de lógica JavaScript, establecer puntos de interrupción o inspeccionar un mapa de código fuente.
Solo este conjunto ya puede mejorar sustancialmente tus pruebas web.
Elements: por qué un elemento existe pero no funciona
El panel Elements muestra la estructura real de la página. Resulta especialmente útil cuando la interfaz visual engaña.
Úsalo para comprobar:
- →Si el elemento existe realmente en el DOM o solo parece que debería existir
- →Si CSS lo oculta
- →Si está deshabilitado
- →Si otra capa lo cubre
- →Si se ha desplazado fuera de la pantalla
- →Qué clases y atributos tiene realmente
- →Si el DOM cambia tras una acción del usuario
Es especialmente útil para formularios, modales, ayudas emergentes, desplegables, tablas, secciones dinámicas y estados de carga, error o contenido vacío.
Network: conectar la UI con el backend
Si solo dominas una pestaña de DevTools, casi siempre debería ser Network.
Muestra:
- →Qué solicitud se envió
- →A qué URL se dirigió
- →Qué método utilizó
- →Qué encabezados y cuerpo se enviaron
- →Qué estado se devolvió
- →Qué contenía la respuesta
- →Cuánto tardó la solicitud
- →Si hubo una redirección
- →Si hubo llamadas duplicadas o innecesarias
- →Si la caché afectó al resultado
Network ayuda rápidamente a determinar si el problema está en la UI o en el backend. Por ejemplo, si no se envió ninguna solicitud, la causa está casi con certeza en el frontend. Si el servidor devolvió 403 y la UI muestra «error desconocido», la gestión de respuestas es defectuosa. Si se enviaron dos solicitudes en lugar de una, investiga el doble envío, los reintentos o un renderizado innecesario.
Para los ingenieros de QA, Network conecta una acción del usuario con el comportamiento técnico real del sistema.
Console: defectos que no ves en la página
Console resulta especialmente útil cuando la interfaz se comporta de forma extraña sin mostrar un error explícito al usuario.
- →Se puede pulsar un botón, pero no ocurre nada.
- →Una parte de la página no vuelve a renderizarse.
- →No se abre un modal.
- →Un filtro se queda bloqueado.
- →Un escenario funciona, pero otro falla inesperadamente después del paso anterior.
Cuando esto ocurre, a menudo ya hay un error de JavaScript en Console. Eso mejora mucho la investigación. En lugar de informar «a veces no se abre», puedes incluir un error concreto de ejecución y su contexto en el informe del defecto.
Distingue las señales útiles del ruido. Los proyectos grandes pueden generar muchas advertencias y mensajes de terceros. Presta especial atención a los mensajes nuevos que aparecen justo al ejecutar tu escenario.
Application: estado del usuario en el navegador
El panel Application es especialmente importante para escenarios relacionados con:
- →Sesiones
- →Autorización
- →Recordarme
- →Almacenamiento
- →Indicadores de funciones
- →Service workers
- →Caché y comportamiento sin conexión
Úsalo para inspeccionar:
- →Qué cookies se establecen realmente
- →Qué contienen localStorage y sessionStorage
- →Qué queda después de cerrar sesión
- →Si persiste un estado antiguo entre sesiones
- →Si un service worker afecta al comportamiento de la aplicación
- →Si la página utiliza una caché obsoleta
Muchos defectos web aparentemente inexplicables resultan ser problemas de estado del cliente. Sin este panel es fácil confundirlos con inestabilidad aleatoria.
Hábitos útiles con DevTools para QA
- →Abre Network antes de iniciar el escenario.
- →Limpia el registro y céntrate en las solicitudes asociadas a la acción actual.
- →Compara escenarios correctos y fallidos.
- →Inspecciona respuesta y tiempos, además del código de estado.
- →Comprueba Console después de un comportamiento inusual de la UI.
- →Inspecciona Application al investigar problemas de inicio de sesión, pestañas, actualización y cierre de sesión.
- →Usa Elements cuando un botón está presente pero no funciona.
Estos hábitos sencillos suelen mejorar rápidamente la calidad de las pruebas.
Ejemplo práctico
Imagina este defecto: el usuario pulsa «Pagar» y la pantalla queda atascada en un estado de carga.
Entre las comprobaciones útiles con DevTools están:
- →En Network, comprueba si se envió alguna solicitud.
- →Si se envió, inspecciona su estado, respuesta y tiempos.
- →En Console, comprueba si el frontend falló después de recibir la respuesta.
- →En Elements, comprueba si una capa de carga ha bloqueado permanentemente la interfaz.
- →En Application, comprueba si el estado de sesión está dañado o han desaparecido datos necesarios.
Sin DevTools, podría informarse como «a veces se bloquea». DevTools ayuda a determinar si la causa es un tiempo de espera del backend, un error de JavaScript, una solicitud duplicada, un estado obsoleto o una capa de carga defectuosa.
Ideas clave para ingenieros de QA
- →DevTools revela el comportamiento real del navegador junto al resultado visual.
- →Los paneles más útiles para QA son Elements, Network, Console y Application.
- →La mayoría de los defectos web son más fáciles de aislar si inspeccionas DOM, solicitudes, errores y estado del navegador, además de la pantalla.
- →Abre DevTools durante las pruebas habituales y también cuando algo falle.
- →Cuanto mejor manejes DevTools, más rápido distinguirás problemas de frontend y backend y redactarás informes precisos.
Lecturas adicionales
- →En esta base de conocimiento: Cookies, SessionStorage, LocalStorage
- →En esta base de conocimiento: HTTP y HTTPS
- →Recurso externo: Documentación de Chrome DevTools
- →Recurso externo: Introducción a Chrome DevTools
- →Recurso externo: Documentación de usuario de Firefox DevTools