Herramientas integradas en navegadores para QA

Los navegadores hoy en día tienen herramientas para mejorar la calidad de software.

Aún recuerdo cuando las herramientas que te encontrabas en los navegadores sólo te permitían ver el código fuente. Hoy en día, te permiten hacer muchas más cosas, como ejecutar y depurar fragmentos de JavaScript, monitorear el tráfico de red en tiempo real a medida que tu aplicación o página se carga para identificar cuellos de botella, analizar el rendimiento de CSS y garantizar que su código no utiliza demasiada memoria o demasiados CPU… Desde una perspectiva de pruebas, podemos reproducir cómo una aplicación o página web se representará en diferentes navegadores, así como en diferentes dispositivos y plataformas a través de la magia del diseño de simuladores incorporados.

Chrome’s developer tools

Las herramientas de desarrollo de Chrome te permiten editar y depurar código, auditar componentes individuales para detectar problemas de rendimiento, simular diferentes pantallas de dispositivos, incluyendo móbiles, cómo Android o iOS.

Menú principal Chrome > Más herramientas >  Herramientas de desarrollador.

Resúmen de lo que un QA puede hacer con la herramienta:

  • Elementos: proporciona la capacidad de inspeccionar código CSS y HTML, así como editar CSS sobre la marcha, al ver los efectos de los cambios en tiempo real.
  • Consola: la consola de JavaScript de Chrome permite la entrada directa de comandos y la depuración de diagnósticos.
  • Red: categoriza y muestra información detallada sobre cada operación relacionada en la aplicación o página activa, incluidos los encabezados de solicitud y respuesta completos, así como las métricas de tiempo avanzadas.
  • Cronología: permite un análisis en profundidad de cada actividad que tiene lugar dentro del navegador tan pronto como se inicia una solicitud de carga de la página o la aplicación.
  • Con el Modo dispositivo se activa un simulador de dispositivos, incluidos varios modelos conocidos de Android e iOS, como iPad, iPhone y Samsung Galaxy. También tiene la capacidad de emular resoluciones de pantalla personalizadas para adaptarse a las necesidades particulares.

Responsive Design Mode de Firefox

Con responsive design mode, puedes adaptar tu web a diferentes tamaños de pantalla para poder simular diferentes tipos de dispositivos, como teléfonos móviles o tabletas. El modo responsive  hace que sea fácil ver cómo se verá tu web con diferentes resoluciones de pantalla.

Menú Principal Firefox > Desenvolupador > Responsive Design Mode

Resúmen de lo que puede hacer un QA con la herramienta:

Toggle Tools:  muestra u oculta la interfaz de herramientas del desarrollador, que generalmente se encuentra en la parte inferior de la ventana del navegador.

    • Inspector: Para inspeccionar y / o ajustar el código CSS y HTML en la página activa, así como en un dispositivo portátil a través de la depuración remota.
    • Consola web: te permite ejecutar expresiones de JavaScript dentro de la página activa, así como revisar datos registrados, incluyendo advertencias de seguridad, solicitudes de red, mensajes CSS y más.
    • Editor de estilos: le permite crear nuevas hojas de estilo e incorporarlas a la página web activa, o editar hojas existentes y probar cómo se renderizan sus cambios en un navegador con un solo clic.
    • Rendimiento: proporciona un desglose detallado del rendimiento de la red de la página activa.
    • Red: enumera cada solicitud de red iniciada por el navegador junto con el método correspondiente, dominio de origen, tipo, tamaño y tiempo transcurrido.
    • Vista de diseño receptivo: te permite ver instantáneamente una página web en diferentes resoluciones, diseños y tamaños de pantalla para imitar múltiples dispositivos, incluyendo tabletas y teléfonos inteligentes.

Por si quieres saber más: How to Use Web Browser Developer Tools