interaction-replay-debugger

To measure INP and diagnose UI responsiveness, analyze user interaction performance data by breaking down inputDelay, processingTime, and presentationDelay to identify slow phases. This isolates specific bottlenecks in clicks, key presses, and scrolls.

To pinpoint the exact script causing a long animation frame, use a Long Animation Frame Observer to record frame data and script attribution. This correlates slow interactions with specific code impacts to identify the root cause.

To identify which interaction phase is slowing down your page, use an Event Timing Observer to collect interaction events. This provides a timing breakdown of inputDelay, processingTime, and presentationDelay to highlight the slowest phase.

Yes, you need the Event Timing API to perform interaction timing analysis. Instrumenting the target page with this API is required to harvest interaction data, correlate long animation frames, and generate a ranked list of slow interactions.

Yes, you can use Playwright for INP analytics and QA regression testing. Install instrumentation on a target page, perform a representative interaction sequence, and harvest results to validate performance after changes.

Yes, interaction replay debugging requires a Chromium-based browser environment. This browser support is necessary to utilize the Event Timing API and Long Animation Frame Observer for harvesting and correlating performance results.