🚀 Features implemented: - IndexedDB local database for trace storage and management - Drag & drop trace file upload with validation - HTTP Request viewer with advanced filtering and analysis - CDN provider detection (Cloudflare, Akamai, CloudFront, etc.) - Queue time analysis with bottleneck detection - Visual highlighting for file sizes and request durations - Priority-based request analysis - Phase event viewer with detailed trace exploration - Filmstrip screenshot integration (with debugging) - 3D Babylon.js viewer component 📊 Analysis capabilities: - HTTP/1.1 vs HTTP/2 performance comparison - CDN edge vs origin detection - Connection limit bottleneck identification - Priority queue analysis - Visual correlation with network requests - Performance bottleneck identification 🛠️ Technical stack: - React 19.1.0 + TypeScript 5.8.3 - Vite build system - IndexedDB for local storage - Babylon.js 8+ for 3D visualization - Chrome DevTools trace format support 🎨 User experience: - Clean, professional interface design - Color-coded performance indicators - Expandable detailed views - Search and filtering capabilities - Responsive grid layouts - Intuitive navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
161 lines
3.2 KiB
TypeScript
161 lines
3.2 KiB
TypeScript
/**
|
|
* Chrome DevTools Performance Trace Format
|
|
* Based on the Trace Event Format specification
|
|
*/
|
|
|
|
// Main trace file structure
|
|
export interface TraceFile {
|
|
metadata: TraceMetadata
|
|
traceEvents: TraceEvent[]
|
|
}
|
|
|
|
// Metadata section
|
|
export interface TraceMetadata {
|
|
source: string
|
|
startTime: string
|
|
hardwareConcurrency: number
|
|
dataOrigin: string
|
|
modifications: TraceModifications
|
|
}
|
|
|
|
export interface TraceModifications {
|
|
entriesModifications: {
|
|
hiddenEntries: unknown[]
|
|
expandableEntries: unknown[]
|
|
}
|
|
initialBreadcrumb: {
|
|
window: {
|
|
min: number
|
|
max: number
|
|
range: number
|
|
}
|
|
child: null | unknown
|
|
}
|
|
annotations: {
|
|
entryLabels: unknown[]
|
|
labelledTimeRanges: unknown[]
|
|
linksBetweenEntries: unknown[]
|
|
}
|
|
}
|
|
|
|
// Base trace event structure
|
|
export interface BaseTraceEvent {
|
|
/** Event arguments - varies by event type */
|
|
args: Record<string, unknown>
|
|
/** Category */
|
|
cat: string
|
|
/** Event name */
|
|
name: string
|
|
/** Phase type */
|
|
ph: TraceEventPhase
|
|
/** Process ID */
|
|
pid: number
|
|
/** Thread ID */
|
|
tid: number
|
|
/** Timestamp in microseconds */
|
|
ts: number
|
|
/** Thread timestamp in microseconds (optional) */
|
|
tts?: number
|
|
}
|
|
|
|
// Specific event types
|
|
export interface MetadataEvent extends BaseTraceEvent {
|
|
ph: 'M'
|
|
args: {
|
|
name?: string
|
|
uptime?: string
|
|
[key: string]: unknown
|
|
}
|
|
}
|
|
|
|
export interface DurationEvent extends BaseTraceEvent {
|
|
ph: 'X'
|
|
/** Duration in microseconds */
|
|
dur: number
|
|
/** Thread duration in microseconds (optional) */
|
|
tdur?: number
|
|
}
|
|
|
|
export interface InstantEvent extends BaseTraceEvent {
|
|
ph: 'I'
|
|
/** Scope (optional) */
|
|
s?: 't' | 'p' | 'g'
|
|
/** Layer tree ID (optional) */
|
|
layerTreeId?: number
|
|
/** Layer ID (optional) */
|
|
layerId?: number
|
|
}
|
|
|
|
export interface BeginEvent extends BaseTraceEvent {
|
|
ph: 'B'
|
|
}
|
|
|
|
export interface EndEvent extends BaseTraceEvent {
|
|
ph: 'E'
|
|
}
|
|
|
|
// Union type for all trace events
|
|
export type TraceEvent = MetadataEvent | DurationEvent | InstantEvent | BeginEvent | EndEvent
|
|
|
|
// Phase type enumeration
|
|
export type TraceEventPhase =
|
|
| 'M' // Metadata
|
|
| 'X' // Complete (duration)
|
|
| 'I' // Instant
|
|
| 'B' // Begin
|
|
| 'E' // End
|
|
| 'D' // Deprecated
|
|
| 'b' // Nestable start
|
|
| 'e' // Nestable end
|
|
| 'n' // Nestable instant
|
|
| 'S' // Async start
|
|
| 'T' // Async instant
|
|
| 'F' // Async end
|
|
| 'P' // Sample
|
|
| 'C' // Counter
|
|
| 'R' // Mark
|
|
|
|
// Common argument types found in trace events
|
|
export interface TracingStartedArgs {
|
|
data: {
|
|
frameTreeNodeId: number
|
|
frames: Array<{
|
|
frame: string
|
|
isInPrimaryMainFrame: boolean
|
|
isOutermostMainFrame: boolean
|
|
name: string
|
|
processId: number
|
|
url: string
|
|
}>
|
|
persistentIds: boolean
|
|
}
|
|
}
|
|
|
|
export interface UpdateLayerArgs {
|
|
layerId: number
|
|
layerTreeId: number
|
|
}
|
|
|
|
export interface NeedsBeginFrameChangedArgs {
|
|
data: {
|
|
needsBeginFrame: number
|
|
}
|
|
layerTreeId: number
|
|
}
|
|
|
|
export interface RunTaskArgs {
|
|
[key: string]: unknown
|
|
}
|
|
|
|
// Thread and process name arguments
|
|
export interface ThreadNameArgs {
|
|
name: string
|
|
}
|
|
|
|
export interface ProcessNameArgs {
|
|
name: string
|
|
}
|
|
|
|
export interface ProcessUptimeArgs {
|
|
uptime: string
|
|
} |