<http-transaction>

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

Attributes

Properties

{
  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

<http-request>

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

Attributes

Properties

{
  method: string,
  url: string,
  httpVersion?: string,
  headers?: Object,
  body?: string
}

<http-response>

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

Attributes

Properties

{
  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

Properties

[{
  request: { method, url, headers, body },
  response: { status, statusText, headers, body },
  timing: { startTime, endTime, duration }
}]

Events

Methods

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

Options