Actualización del producto: La nueva consola de navegador en tiempo real ya está en funcionamiento.

Anteriormente, cuando los usuarios ejecutaban un navegador en Playground o Sesiones, no podían acceder a información clave de depuración como la Consola del navegador, la actividad de red, los cambios en el DOM o las trazas de eventos. Por ejemplo:

• ¿Quieres ver mensajes de error? Tenías que abrir DevTools manualmente.
• ¿Quieres revisar los registros de la consola? No era posible.
• ¿Necesitas reproducir una sesión anterior? Visibilidad muy limitada.

Para abordar estas necesidades de depuración, estamos emocionados de introducir las funciones de Consola del Navegador y Repetición de Registros. Estas permiten monitorear el estado del navegador en tiempo real — justo como en el desarrollo local — al usar Scrapeless Playground o revisar Repeticiones de Sesiones. Obtendrás una visibilidad completa e intuitiva sobre cómo se comporta tu navegador, incluidos los registros de la consola, los eventos de red y las actualizaciones del DOM.

---

¿Qué Puede Hacer Esta Función?

Consola en Tiempo Real en Playground

Ve la salida de la consola, los registros de depuración y los mensajes de error directamente dentro de la página mientras tu script se está ejecutando, sin necesidad de abrir DevTools del navegador por separado.

Vista de Consola en la Repetición de Sesiones

Al revisar sesiones históricas, ahora puedes inspeccionar el panel de Consola, Red y Elementos por página y por acción.

Al final de cada sesión, aparece un nuevo mensaje:
"Sesión guardada con éxito. Ver Sesión"

Haciendo clic en él, te lleva directamente a los detalles de la sesión para una depuración y revisión rápidas.

Vista de Depuración Multi-pestaña

Una única interfaz admite pestañas de Consola / Red / Elementos con cambio sin problemas, brindándote una imagen completa del comportamiento de la página desde diferentes perspectivas.

---

Ya sea que estés:

• Depurando un script por primera vez
• Revisando y analizando un problema en producción
• Colaborando con compañeros de equipo para rastrear un problema

Ahora puedes identificar rápidamente la causa raíz y reducir la sobrecarga de comunicación.

---

¿Qué se Ha Mejorado en Esta Actualización?

Playground: Consola en Tiempo Real para una Depuración Sin Problemas

Con esta actualización, cada vez que haces clic en Ejecutar en Playground, no solo estás lanzando una instancia de navegador, sino que también estás habilitando monitoreo de Consola en tiempo real.

Ya sea salida de logs, mensajes de error o información de depuración, todo ahora es claramente visible en un solo lugar.

Mejoras Clave:

• Persistencia de Sesiones
  Todos los registros se guardan después de la ejecución y se vinculan al historial de sesiones — puedes reproducirlos en cualquier momento.

• Diseño Flexible
  El panel de Consola ahora se muestra junto al DOM, Red y Eventos, con un fácil cambio de pestañas para una experiencia de depuración completa.

• Registros que se Actualizan Automáticamente
  No hay necesidad de actualizar manualmente — los registros se desplazan y se actualizan en tiempo real mientras tu script se ejecuta.

---

Sesiones: Repetición de Registro de Consola / DOM / Red / Eventos

No es solo Playground — Repetición de Sesiones también ha sido mejorada. Ahora puedes revisar y rastrear completamente las actividades clave del navegador capturadas durante cada sesión:

• Consola: Todos los registros del navegador generados durante la reproducción de la sesión
• DOM: Cambios estructurales en la página a lo largo del tiempo
• Red: Todos los detalles de solicitudes, respuestas y carga de recursos
• Eventos: Interacciones del usuario y eventos activados por el sistema

Esta mejora facilita el diagnóstico de problemas después de la ejecución, auditar el comportamiento de la automatización o compartir información con tu equipo.

---

Características Destacadas

• Soporte Multi-Página
  Cambia fácilmente entre diferentes URL dentro de una sesión para ver los registros correspondientes.

• Optimización de Carga Pérezosa
  Los datos de registro se cargan solo cuando se accede al panel correspondiente, reduciendo solicitudes innecesarias y mejorando el rendimiento.

• Estados Vacíos Amigables
  Cuando no se capturan registros, se muestran mensajes claros e informativos para indicar el estado.

---

Nuevo: Vista de Pantalla Completa y Compartición de URL en Vivo con Un Clic

Dos grandes mejoras de usabilidad para mejorar la colaboración y la depuración:

Modo Pantalla Completa

Tanto Playground como Sesiones ahora admiten visualización en pantalla completa, brindándote más espacio para previsualizar, inspeccionar y depurar con enfoque.

Compartición de URL en Vivo con Un Clic

Ahora puedes copiar instantáneamente la URL en Vivo de cualquier Playground o Sesión en Vivo con un solo clic, facilitando su compartición con compañeros de equipo o clientes, sin necesidad de inicio de sesión o configuración adicional.

---

Demostración de Funciones

Red – Diagnosticar Problemas de Carga de Página y Solicitudes

En el panel de Red (similar a DevTools), puedes observar claramente el tiempo de carga y el tipo de recurso para cada solicitud. Los cuellos de botella comunes en el rendimiento incluyen:

• Archivos de Imagen Grandes: Las imágenes de alta resolución que no están comprimidas pueden retrasar significativamente los tiempos de carga de la página.
• Fallas de Script de Terceros: Las solicitudes de JS de plugins fallidas pueden bloquear el renderizado crítico de la página.
• Demasiados archivos pequeños: Cientos de pequeñas solicitudes pueden abrumar la cola de solicitudes del navegador y causar retrasos.

Al analizar estos datos, puedes identificar y optimizar rápidamente los recursos críticos para mejorar significativamente el rendimiento general de la página.

---

Monitorear los códigos de estado de respuesta te ayuda a identificar rápidamente la raíz de los problemas:

• 404 No encontrado: El endpoint de la API es incorrecto, probablemente debido a una ruta incorrecta o mal escrita.
• 500 Error interno del servidor: El backend encontró un error, verifica los registros del servidor para más detalles.
• 400 Solicitud incorrecta: Los parámetros de solicitud no cumplen con el formato o estructura esperada por la API.

El panel de Red proporciona una clara visibilidad sobre las cargas de solicitud, los cuerpos de respuesta y los mensajes de error, lo que lo convierte en una herramienta esencial para diagnosticar problemas relacionados con la API.

Elementos: Inspeccionar la estructura real de la página

El panel de Elementos te permite ver directamente la estructura HTML actual de la página y los estilos CSS asociados.

Puedes:

• Verificar si un elemento específico se ha renderizado correctamente
• Modificar estilos en tiempo real para verificar efectos de diseño o interacción
• Inspeccionar elementos ocultos o componentes cargados dinámicamente dentro del DOM

Este es a menudo el primer paso para diagnosticar problemas como "por qué un elemento no es visible" o errores relacionados con el diseño.

Consola: Depurar y ver registros de errores

Al insertar declaraciones console.log() en tu código, puedes:

• Salir valores de variables y estados en tiempo de ejecución
• Rastrear el orden de las llamadas a funciones
• Identificar rápidamente errores lógicos

Esto es especialmente valioso al depurar scripts de automatización o lógica de negocio compleja.

¿Para quién es esta función?

• Equipos de QA: Depurar scripts de automatización y verificar si las interacciones de la interfaz de usuario se comportan como se espera
• Equipos de ingeniería: Desarrollar y solucionar problemas en flujos de trabajo complejos del navegador, identificando rápidamente comportamientos anormales
• Operaciones SaaS: Monitorear el comportamiento del frontend del lado del usuario para optimizar caminos de conversión y la experiencia general
• Soporte técnico: Reproducir acciones de usuario de forma remota para identificar y resolver problemas rápidamente

👉 Abre Playground ahora y comienza tu primera sesión de depuración en tiempo real.