7 funciones útiles de DevTools para testers

Las herramientas de desarrollo se muestran en el navegador Chrome como un panel que proporciona información sobre la pestaña abierta. Para utilizar DevTools, abre el menú haciendo clic en los tres puntos en la esquina superior derecha, selecciona "Más herramientas" y luego "Herramientas para desarrolladores". También puedes usar los atajos de teclado Ctrl+Shift+I o presionar F12. Opcionalmente, la panel de DevTools se puede mover o abrir en una ventana separada.

Visualización de información sobre elementos

En la pestaña "Elementos" puedes ver información sobre los elementos de una página web, el árbol DOM y los estilos CSS. Con esta información, puedes determinar los mejores selectores para los elementos web, lo cual es especialmente relevante al probar herramientas de automatización web.

En las herramientas de desarrollo, puedes obtener el XPath o el selector CSS de un elemento. Para hacerlo, ve a la pestaña "Elementos", haz clic derecho en el elemento deseado y selecciona "Copiar", luego elige "Copiar XPath" o "Copiar Selector".

Para buscar elementos en el DOM, presiona Ctrl+F. Puedes buscar no solo por texto simple, sino también con filtros que te permiten encontrar selectores CSS o XPath complejos. Esto te ayudará a asegurarte de que el selector encuentre los elementos correctos y ver la cantidad de coincidencias.

El selector CSS indicado se corresponde con 9 elementos en el DOM.

Monitoreo de solicitudes HTTP

La pestaña "Red" muestra información sobre las solicitudes HTTP. Aquí encontrarás encabezados, cuerpos de solicitud, códigos de estado y cuerpos de respuesta. En esta pestaña, el probador puede verificar el estado actual de las solicitudes de red.

Puedes copiar la URL y el cuerpo de una solicitud para usarlos posteriormente en pruebas de API, por ejemplo, con Postman. Para hacerlo, haz clic derecho en la solicitud, elige "Copy" y luego una opción como "Copy as cURL" o "Copy as fetch". También puedes detectar solicitudes innecesarias que se envían durante la carga de la página. Si una página se carga lentamente, puedes identificar qué solicitudes están causando el problema.

La grabación de la red está activa por defecto mientras DevTools está abierto, así que las solicitudes aparecen en la pestaña "Red" a medida que usas la aplicación. Si quieres pausarla, usa el botón "Stop recording network log" (Detener la grabación del registro de red) o presiona Ctrl+E (Cmd+E en Mac). El botón "Clear" (Borrar) limpia la lista de solicitudes.

Las solicitudes HTTP registradas en la pestaña "Red" durante la carga de una página.

Haz clic en una solicitud HTTP para ver lo siguiente.

• URL de la solicitud
• Encabezados de solicitud y respuesta
• Método de solicitud y código de estado
• Cuerpo de la solicitud y respuesta.

En la parte inferior de la pestaña se muestra el número de solicitudes enviadas, el tamaño de los datos transferidos y el tiempo de carga.

El gráfico de cascada en la pestaña "Red" muestra las etapas de las solicitudes. Por ejemplo, cuánto tiempo llevó cada solicitud, cuándo se envió y cuándo se completó. Con esta herramienta, el probador puede descubrir qué solicitudes se están ejecutando en paralelo y detectar problemas de rendimiento.

Simulación de características de red

Para probar la aplicación en diferentes condiciones de conexión, usa la lista desplegable de limitación de velocidad (Throttling) en la pestaña "Red". Incluye perfiles predefinidos como Fast 4G, Slow 4G y 3G, además de la opción Offline para trabajar sin conexión. También puedes crear tus propios perfiles en Configuración > Throttling. Mientras la limitación está activa, la pestaña muestra un ícono de advertencia para que no la olvides. Por defecto, el navegador utiliza la conexión real de tu dispositivo, y esta simulación te permite ver cómo funcionará la aplicación con una conexión débil o incluso sin conexión.

Simulación de características de red.

La pestaña Performance (Rendimiento) muestra la duración de cada evento. Comienza a grabar, realiza las acciones necesarias y detén la grabación. Con la opción Screenshots (Capturas de pantalla) activada, cada cambio en la pantalla se guarda como una captura separada, y con ellas puedes examinar fragmentos de la grabación y obtener detalles sobre ellos. En esta pestaña también puedes limitar la velocidad de la CPU para comprobar cómo se comporta la aplicación en un dispositivo lento.

Emulación de dispositivos

Aunque las herramientas de desarrollo de Chrome no pueden reemplazar las pruebas en dispositivos reales o emuladores avanzados, ofrecen funciones de emulación. Estas funciones te permiten ver cómo se ve la aplicación en diferentes pantallas.

Para hacerlo, ve al menú de configuración o presiona F1 en las herramientas de desarrollo y selecciona "Dispositivos".

En este menú, se enumeran los dispositivos que Google ofrece por defecto. Puedes seleccionar uno de ellos para las pruebas o agregar un dispositivo personalizado con configuraciones individuales, incluyendo la resolución de pantalla y la capacidad táctil.

Para activar la emulación de dispositivo, haz clic en el ícono que representa un teléfono o una tablet.

La aplicación se mostrará tal como lo haría en el dispositivo seleccionado. Puedes alternar entre dispositivos en la configuración. También puedes especificar las configuraciones de red, como la falta de conexión a Internet y la orientación de la pantalla. Si el dispositivo tiene pantalla táctil, esta función también se simulará en Chrome.

Trabajando con cookies

Las cookies contienen información que se almacena en el dispositivo y envían datos al servidor, lo que permite mostrar contenido personalizado. Gracias a las cookies, las páginas se cargan más rápido y se almacena información importante, como el contenido de un carrito de compras en una tienda en línea.

Es necesario probar las aplicaciones web con diferentes configuraciones de cookies. La información clave en una cookie incluye el Nombre (Name), Valor (Value) y Fecha de vencimiento (Expires / Max-Age), que se pueden obtener en la pestaña "Application" (Aplicación) de las herramientas de desarrollo de Chrome.

En el menú de la izquierda, abre la sección Storage, despliega Cookies y selecciona el sitio web para ver las cookies almacenadas y obtener información detallada sobre ellas. Aquí puedes eliminar cookies, cambiar sus valores y rastrear el impacto de estos cambios en el funcionamiento de la aplicación.

Cookies para l**a página de la aplicación web

Captura de pantallas

Con las herramientas de desarrollo, puedes tomar capturas de pantalla de un sitio web o una aplicación web. Presiona Ctrl+Shift+P, escribe "screenshot" y elige una de las cuatro opciones.

• "Capture area screenshot" (Capturar área de la pantalla) crea una captura de pantalla de una área específica de la pantalla, similar a la herramienta "Recortes" en Windows.
• "Capture full size screenshot" (Capturar captura de pantalla de tamaño completo) crea una copia de la imagen de toda la página, incluyendo áreas que no se muestran en la pantalla.
• "Capture node screenshot" (Capturar captura de pantalla del nodo) toma una captura de pantalla del elemento seleccionado en la pestaña "Elements" (Elementos).
• "Capture screenshot" (Capturar captura de pantalla) toma una captura de pantalla de la parte visible de la página.

Cualquiera de las opciones elegidas guardará la captura de pantalla en formato .png.

Pruebas de localización

Si una aplicación está localizada y necesitas verificar su funcionamiento con diferentes configuraciones de país e idioma, puedes cambiar las configuraciones regionales del navegador en las herramientas de desarrollo. Abre el menú con tres puntos junto al botón de configuración, selecciona "More Tools" (Más herramientas) y luego "Sensors" (Sensores). También puedes presionar Ctrl+Shift+P, escribir "sensors" y elegir "Show Sensors". Los nombres de los menús pueden aparecer en español o en inglés según el idioma de tu Chrome.

Se mostrará una lista de ubicaciones que incluyen información sobre la geolocalización, las configuraciones regionales y la zona horaria. Puedes configurar tus propias opciones haciendo clic en "Manage" (Administrar) y proporcionando información sobre la ubicación que deseas.

Más herramientas para tu flujo de pruebas

Además de las siete funciones anteriores, DevTools incluye herramientas más recientes que pueden ayudarte en el trabajo diario.

• El panel Recorder (Grabadora) permite grabar un flujo de usuario como una lista de pasos con clics, entradas de texto y navegación, editarlo y reproducirlo para comprobar que sigue funcionando. Se abre desde "More tools" > "Recorder".
• La asistencia de IA (AI assistance) integra a Gemini en DevTools. Puede explicar estilos de un elemento en Elements, interpretar los encabezados de una solicitud en Network, aclarar para qué sirve un archivo en Sources o investigar una página lenta en Performance. Es una función experimental, está desactivada por defecto y se activa en Configuración > AI assistance; su disponibilidad depende de tu país y de tu cuenta. Las respuestas pueden ser inexactas, así que verifícalas siempre antes de reportar un defecto o cambiar una prueba.