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.