<http-transaction>

Displays a complete HTTP request/response pair side by side. This is the main component for showing HTTP exchanges.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto" (default)
highlight	string	Comma-separated sections to highlight: request-line, request-headers, request-body, response-line, response-headers, response-body
box	string	Comma-separated sections to add labeled borders: same values as highlight

Properties

Property	Type	Description
data	Object	HTTP exchange data with structure: { request: { method: string, url: string, httpVersion?: string, headers?: Object, body?: string }, response: { status: number, statusText: string, httpVersion?: string, headers?: Object, body?: string } }

CSS Custom Properties

Property	Default	Description
--bg-primary	#f5f5f5	Primary background color
--bg-secondary	white	Secondary background color
--border-color	#ddd	Border color
--text-primary	#1f2937	Primary text color

<http-request>

Displays just the HTTP request portion: method, URL, headers, and body.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto"
highlight	string	Sections to highlight: request-line, headers, body, or header:name
box	string	Sections to add labeled borders
show-header	boolean	Show/hide the "Request" header bar (default: true)

Properties

Property	Type	Description
data	Object	Request data: { method: string, url: string, httpVersion?: string, headers?: Object, body?: string }

<http-response>

Displays just the HTTP response portion: status line, headers, and body.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto"
highlight	string	Sections to highlight: status-line, headers, body, or header:name
box	string	Sections to add labeled borders
show-header	boolean	Show/hide the "Response" header bar (default: true)

Properties

Property	Type	Description
data	Object	Response data: { status: number, statusText: string, httpVersion?: string, headers?: Object, body?: string }

<http-waterfall>

Visualizes multiple HTTP exchanges with list, duration, and waterfall timeline views. Supports live capture and a built-in request builder.

Attributes

Attribute	Type	Description
view	string	View mode: "list", "duration", or "waterfall"
theme	string	Color theme: "light", "dark", or "auto"
capture	boolean	Enable live capture of fetch/XHR requests
resources	boolean	List the page's own requests (document, stylesheets, scripts, images, fonts, frames) from Resource Timing. Defaults to the waterfall view
filter	string	URL pattern filter for capture and resources (supports * wildcards)
max-entries	number	Maximum number of entries to display (default: 100)
explorer	boolean	Show the request builder panel

Properties

Property	Type	Description
exchanges	Array	Array of HTTP exchanges with timing: [{ request: { method, url, headers, body }, response: { status, statusText, headers, body }, timing: { startTime, endTime, duration } }] Exchanges listed by the resources attribute also carry timing phases and a resource object: { timing: { startTime, endTime, duration, phases: { queue, dns, connect, tls, wait, download } // null when hidden }, resource: { kind, // 'navigation' or 'resource' initiatorType, // 'link', 'script', 'img', 'css', 'fetch', ... label, // path, or host and path when cross-origin crossOrigin, opaque, protocol, // 'h2', 'h3', 'http/1.1' transferSize, encodedBodySize, decodedBodySize, cache // 'network', 'cache', 'revalidated', 'unknown' } }
view	string	Get/set current view mode

Events

Event	Detail	Description
request-sent	{ method, url, headers, body }	Fired when explorer sends a request
response-received	{ request, response, timing }	Fired when explorer receives a response
request-error	{ error }	Fired when explorer request fails
resources-observed	{ exchanges }	Fired for each batch of requests the resources attribute adds

Methods

Method	Description
startCapture()	Start capturing HTTP requests
stopCapture()	Stop capturing
togglePause()	Pause/resume capturing
clearExchanges()	Clear all captured exchanges
startResources()	Start listing the page's own requests
stopResources()	Stop listing the page's own requests
toggleExplorer()	Open/close the request builder panel

HTTPInterceptor (Utility Class)

A utility class for intercepting fetch() and XMLHttpRequest calls. Used internally by http-waterfall but can be used standalone.

Usage

import { HTTPInterceptor } from '@profpowell/http-component/http-interceptor'; const interceptor = new HTTPInterceptor(); interceptor.start((exchange) => { console.log('Captured:', exchange.request.method, exchange.request.url); }, { filter: '/api/*', maxBodySize: 1024 * 1024 }); // Later, stop intercepting interceptor.stop();

Methods

Method	Description
start(callback, options)	Start intercepting with callback and options
stop()	Stop intercepting and restore original functions
pause()	Pause forwarding to listeners
resume()	Resume forwarding to listeners
addListener(callback)	Add additional listener
removeListener(callback)	Remove a listener

Options

Option	Type	Default	Description
filter	string	null	URL pattern filter (* wildcard supported)
maxBodySize	number	1MB	Maximum body size to capture

ResourceTimingSource (Utility Class)

Reports the requests a page itself made, from the browser's Navigation Timing and Resource Timing data. Used internally by http-waterfall's resources attribute but can be used standalone. It sees what the interceptor cannot (requests made by HTML and CSS) and cannot see what the interceptor can (headers and bodies).

Usage

import { ResourceTimingSource } from '@profpowell/http-component'; const source = new ResourceTimingSource(); // Called with a batch of exchanges, oldest first. Earlier requests arrive first. source.start((exchanges) => { for (const { request, resource } of exchanges) { console.log(resource.initiatorType, request.url, resource.transferSize); } }, { filter: '/assets/*' }); // Later, stop reporting source.stop();

Methods

Method	Description
start(callback, options)	Start reporting; entries recorded earlier are delivered first
stop()	Stop reporting

Options

Option	Type	Default	Description
filter	string	null	URL pattern filter (* wildcard supported)
navigation	boolean	true	Include the document itself
skipScripted	boolean	false	Leave out fetch and XHR entries; use when the interceptor is also capturing

What the browser hides

Resource Timing reports no headers or bodies. For a cross-origin response it reports sizes and timing phases only when that server sends a Timing-Allow-Origin header; without it the exchange has resource.opaque set, zero sizes, and timing.phases of null. Start and end times are always reported.