FlowTrace
FlowTrace - Visualizar lo que ocurre detrás de un clic
Visualización educativa de todo el flujo de petición y renderizado de la web.
Aplicación web En linea
Acerca de
FlowTrace es una aplicación web educativa experimental que visualiza lo que realmente ocurre detrás de las acciones habituales del usuario: un clic, una pulsación de tecla, el envío de un formulario, un desplazamiento. Rastrea la ruta de la petición y el renderizado a través de todo el stack web - bucle de eventos del navegador, DOM, runtime de JavaScript, DNS, TLS, CDN, gateway, servidor, caché, cola, base de datos, respuesta y renderizado - y convierte cada capa en algo que un desarrollador o estudiante puede ver y recorrer paso a paso.
El proyecto explora varios modos interactivos, incluyendo una vista de sistema de alto nivel, un viaje cinematográfico a lo largo de la ruta de la petición, un flujo en primera persona a través del stack y un constructor de escenarios para flujos personalizados, junto con un concepto de FlowTrace Lab para la experimentación práctica.
Características principales
Disparadores de clic, pulsación, envío y desplazamiento
FlowTrace parte de una acción concreta del usuario y rastrea lo que ocurre a continuación, en lugar de explicar el stack web de forma abstracta.
Rastreo de todo el stack - del navegador al renderizado
Cada visualización recorre la misma ruta: bucle de eventos del navegador, DOM, runtime de JS, DNS, TLS, CDN, gateway, servidor, caché, cola, base de datos, respuesta y de vuelta al renderizado.
Simulación 3D del flujo del sistema
Una escena 3D interactiva muestra las peticiones moviéndose por el stack en tiempo real, de modo que el orden, la ramificación y los cuellos de botella son visibles de un vistazo.
Múltiples modos de visualización
Vista de sistema para el panorama general, viaje cinematográfico para la reproducción guiada, flujo en primera persona para la perspectiva del stack desde dentro, y un constructor de escenarios para flujos personalizados.
FlowTrace Lab (experimental)
Un concepto de entorno de pruebas exploratorio donde se pueden inspeccionar capas individuales, activarlas o hacerlas fallar, para ver cómo reacciona el resto del stack.
Creado para aprender
Diseñado para desarrolladores, estudiantes y bootcamps - el objetivo es la intuición sobre cómo viaja una petición real, no una demostración de marketing.
Disparadores de clic, pulsación, envío y desplazamiento
FlowTrace parte de una acción concreta del usuario y rastrea lo que ocurre a continuación, en lugar de explicar el stack web de forma abstracta.
Rastreo de todo el stack - del navegador al renderizado
Cada visualización recorre la misma ruta: bucle de eventos del navegador, DOM, runtime de JS, DNS, TLS, CDN, gateway, servidor, caché, cola, base de datos, respuesta y de vuelta al renderizado.
Simulación 3D del flujo del sistema
Una escena 3D interactiva muestra las peticiones moviéndose por el stack en tiempo real, de modo que el orden, la ramificación y los cuellos de botella son visibles de un vistazo.
Múltiples modos de visualización
Vista de sistema para el panorama general, viaje cinematográfico para la reproducción guiada, flujo en primera persona para la perspectiva del stack desde dentro, y un constructor de escenarios para flujos personalizados.
FlowTrace Lab (experimental)
Un concepto de entorno de pruebas exploratorio donde se pueden inspeccionar capas individuales, activarlas o hacerlas fallar, para ver cómo reacciona el resto del stack.
Creado para aprender
Diseñado para desarrolladores, estudiantes y bootcamps - el objetivo es la intuición sobre cómo viaja una petición real, no una demostración de marketing.
Privacidad y seguridad
Tus datos permanecen en tu dispositivo. Siempre.
