Performance Event Flow

Visualize Page Performance and Custom Events in a Single Flow Performance Event Flow is a Chrome extension designed to help developers and testers visualize key page lifecycle events and custom performance markers in a clear, interactive flow diagram. DEFAULT TRACKED EVENTS By default, the extension tracks the following page-related performance events: Page Navigation Start First Element Visible Page Becomes Interactive Page Load Complete These events are displayed in a sequential flow to help you understand how your page performs during load and interaction. You can also track custom performance events from your own code. This is useful for monitoring specific parts of your application logic or user interactions. ADD CUSTOM EVENTS To add a custom event, insert the following snippet wherever you want to log the event: window.__performanceEventFlow=window.__performanceEventFlow || []; window.__performanceEventFlow.push({event:"<pass event title here>",time:new Date().getTime()}); window.__performanceEventFlow = window.__performanceEventFlow || []; window.__performanceEventFlow.push({ event: "<Your Event Title>", time: new Date().getTime() }); Want to track specific network requests? Just click on "Watch Network Request" in the extension and add the URL details to start monitoring.