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.
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
Página oficial del producto
Editor:
POLPROG
Página oficial del producto
13
Capas del stack visualizadas
4
Tipos de disparador
4
Modos de interacción (planificados)
0
Rastreo / cuentas
01 / FlowTrace
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.
02 / Características principales
Características principales
Las capacidades más importantes explicadas de forma práctica.
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.
03 / Descargar
Acceso al producto
Un camino claro desde la fuente oficial hasta tu primer flujo completado.
Elige la plataforma adecuada
Utiliza uno de los enlaces oficiales disponibles para tu dispositivo o navegador.
Instala o abre
Sigue las instrucciones de la tienda o abre la aplicación web. Sin instaladores de terceros.
Configura y empieza
Revisa las opciones, elige tus preferencias y comienza con el flujo principal.
Opciones oficiales de acceso
04 / Tecnología
Tecnología del producto
Una visión transparente de las tecnologías principales utilizadas para crear y mantener este producto.
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Docker
05 / Seguridad
Privacidad y seguridad
Tus datos permanecen en tu dispositivo. Siempre.