Universal Request Analyzer - User Guide

Table of Contents

  1. Getting Started
  2. Understanding the Extension
  3. Using the Popup Interface
  4. Using the DevTools Panel
  5. Using the Dashboard
  6. Configuration & Settings
  7. Understanding Metrics
  8. Advanced Features
  9. Tips & Best Practices
  10. Troubleshooting

Getting Started

What is Universal Request Analyzer?

Universal Request Analyzer is a powerful browser extension that helps you understand, analyze, and optimize your web application’s network performance. It captures detailed information about every network request your browser makes and provides comprehensive analytics to help you identify bottlenecks and improve performance.

Installation

  1. Chrome/Edge:

    • Visit the Chrome Web Store
    • Search for “Universal Request Analyzer”
    • Click “Add to Chrome/Edge”
    • The extension icon will appear in your toolbar

  2. Firefox:

    • Visit Firefox Add-ons
    • Search for “Universal Request Analyzer”
    • Click “Add to Firefox”

  3. Manual Installation (Developers):

    • Clone the repository
    • Run npm install and npm run build
    • Load unpacked extension from the dist folder

First-Time Setup

When you first install the extension:

  1. Click the extension icon to open the popup
  2. Review the default settings (request capture is enabled by default)
  3. Performance metrics are disabled by default to minimize overhead
  4. Configure your preferences in the options page if needed

Understanding the Extension

Three Ways to View Data

The extension provides three interfaces, each optimized for different use cases:

  1. Popup - Quick insights for the current domain
  2. DevTools Panel - Detailed analysis with real-time updates
  3. Dashboard - Comprehensive cross-domain analytics

Data Architecture

The extension uses a medallion architecture with three data layers:

This architecture ensures data integrity while enabling powerful analytics.

Using the Popup Interface

Opening the Popup

Click the extension icon in your browser toolbar.

What You See

The popup automatically shows metrics for the current tab’s domain you’re viewing:

Important: The extension intelligently filters by the page domain (the website you’re visiting), not the request URL domains. For example, when viewing github.com, you’ll see all requests made by GitHub, including API calls to api.github.com and other third-party services.

Request Type Filter

Use the dropdown to filter by resource type:

Quick Actions

Understanding the Data

Important Notes:

Using the DevTools Panel

Opening DevTools Panel

  1. Press F12 or right-click and select “Inspect”
  2. Navigate to the “Request Analyzer” tab
  3. The panel shows real-time request data

Filter Options

Domain Filter

Note: Domain filtering is based on the page URL (the site making the requests), not the request destination URLs. This groups all requests by the website you’re analyzing.

Page Filter

Time Range

Request Type

Same categories as in the popup (All, XHR/API, Fetch, etc.)

Status Filter

Panel Tabs

1. Overview Tab

Real-time visualizations and key metrics:

Auto-refresh: Enabled by default (5-second intervals)

2. Requests Table

Detailed view of individual requests:

Features:

3. Performance Tab

Performance timing breakdown:

Visualizations:

Note: Performance metrics must be enabled in settings.

4. Endpoints Tab

API endpoint analysis:

Use Cases:

5. Errors Tab

Categorized error analysis:

Features:

Time Travel Feature

Access historical performance data:

  1. Click the “History” button
  2. Select grouping level:
    • By Minute: For recent, detailed analysis
    • Hourly: For daily trends
    • Daily: For long-term patterns
  3. View historical:
    • Request volume over time
    • Average response times
    • Error rate patterns
    • Performance regressions

Use Cases:

Using the Dashboard

Opening the Dashboard

  1. Click the extension icon
  2. Click “Dashboard” button, OR
  3. Right-click extension icon → Options → Dashboard tab

Dashboard Overview

The dashboard provides cross-domain analytics with comprehensive visualizations.

Filters

  1. Domain Selection: Choose which domain to analyze
  2. Page Selection: Optional - filter to specific pages
  3. Time Range: Same options as DevTools Panel
  4. Request Type: Filter by resource type

Dashboard Charts

1. Request Volume Timeline

Line chart showing request count over time.

Insights:

2. Status Distribution

Pie chart of HTTP status codes.

Insights:

3. Top Domains by Requests

Bar chart of most active domains.

Insights:

Area chart of response time metrics.

Insights:

5. Data Transfer

Visualization of bytes transferred.

Insights:

Using Multiple Domains

The dashboard excels at comparing performance across different domains:

  1. Select “All Domains” to see aggregated metrics
  2. Compare individual domain performance
  3. Identify outliers or problem domains
  4. Track third-party service performance

Configuration & Settings

Accessing Settings

Right-click extension icon → Options, or click “Settings” in any interface.

General Settings

Request Capture

Data Retention

Maximum Stored Requests

Performance Monitoring Settings

Performance metrics provide detailed timing breakdown but add overhead.

Enable Performance Metrics

Sampling Rate

Metric Types

Select which timing metrics to capture:

Recommendation: Start with all disabled, enable only what you need.

Export/Import Settings

Export Data

  1. Click “Export Data” button
  2. Choose format: JSON or CSV
  3. Select date range
  4. Apply filters (optional)
  5. Download file

Use Cases:

Import Data

  1. Click “Import Data” button
  2. Select previously exported file
  3. Choose merge or replace strategy
  4. Confirm import

Dashboard Visualization Settings

Enable Dashboard Plots

Chart Types

Select which charts to display on the dashboard:

Note: The “Top Domains/Resources” chart is always visible when domain filtering is active.

Settings Location: Options → General → Dashboard Visualization

Advanced Settings

Auto-Refresh

Theme

Understanding Metrics

Basic Metrics

Total Requests

Count of all network requests in the selected time range and filters.

Average Response Time

Mean duration from request start to completion.

Good: < 200ms Acceptable: 200-500ms Slow: > 500ms

Error Rate

Percentage of requests that failed (4xx, 5xx, or network errors).

Good: < 1% Acceptable: 1-5% Poor: > 5%

Data Transferred

Total bytes of data sent and received.

Consideration: Higher is not always worse if requests are necessary and efficient.

Performance Metrics

DNS Lookup Time

Time to resolve domain name to IP address.

Typical: 20-120ms Optimization: Use DNS prefetching, CDN with good DNS

TCP Connection Time

Time to establish TCP connection.

Typical: 50-200ms Optimization: Keep-alive connections, HTTP/2

SSL/TLS Handshake Time

Time for HTTPS negotiation.

Typical: 50-300ms Optimization: Session resumption, TLS 1.3

Time to First Byte (TTFB)

Time from request sent to first response byte received.

Good: < 200ms Acceptable: 200-500ms Poor: > 500ms

Factors: Server processing time, network latency

Download Time

Time to download response body.

Depends on: Response size, bandwidth Optimization: Compression, smaller responses

Total Duration

Complete request time (sum of all phases).

Core Web Vitals

When performance monitoring is enabled, the extension tracks Core Web Vitals:

Largest Contentful Paint (LCP)

Time until largest content element is rendered.

Target: < 2.5s Acceptable: 2.5-4.0s Poor: > 4.0s

First Input Delay (FID)

Time from user interaction to browser response.

Target: < 100ms Acceptable: 100-300ms Poor: > 300ms

Cumulative Layout Shift (CLS)

Visual stability - sum of unexpected layout shifts.

Target: < 0.1 Acceptable: 0.1-0.25 Poor: > 0.25

Percentiles

P50 (Median)

50% of requests are faster than this value.

Use: Understanding typical experience

P95

95% of requests are faster than this value.

Use: Understanding almost all users’ experience

P99

99% of requests are faster than this value.

Use: Identifying worst-case scenarios

Why Percentiles Matter: Averages can hide problems. P95 and P99 show outliers that affect real users.

Advanced Features

Filter Hierarchy

Understanding how filters work together:

Domain → Page → Request Type → Status → Time Range

Each level narrows down the dataset:

  1. Start with domain (or all domains)
  2. Optionally select specific page(s)
  3. Filter by request type if needed
  4. Filter by status code if needed
  5. Choose time range

Third-Party Domain Tracking

The extension automatically categorizes third-party domains:

Categories:

Why It Matters:

Security Features

Mixed Content Detection

Identifies HTTP resources loaded on HTTPS pages.

Risk: Security warnings, blocked resources Action: Update to HTTPS

Risk Level Assessment

Domains are assigned risk levels based on:

Tips & Best Practices

For Developers

  1. Enable Performance Metrics During Development

    • Use 100% sampling to catch all issues
    • Disable in production to reduce overhead

  2. Use Time Travel for Debugging

    • Compare before/after deployments
    • Identify when regressions occurred

  3. Monitor Third-Party Services

    • Check which services are slowest
    • Consider alternatives or optimizations

  4. Set Up Regular Exports

    • Export weekly for long-term tracking
    • Share data with team members

For QA Teams

  1. Baseline Performance

    • Establish performance baselines
    • Use percentiles (P95, P99) not just averages

  2. Test Across Time Periods

    • Test during different times of day
    • Monitor over extended periods

  3. Focus on Error Patterns

    • Use Errors tab to categorize issues
    • Track error rates over time

For Product Managers

  1. Use Dashboard for High-Level Views

    • Track overall performance trends
    • Compare domains/features

  2. Monitor User Impact

    • Focus on Core Web Vitals
    • Check error rates

  3. Data-Driven Decisions

    • Export data for presentations
    • Use historical data to justify optimization work

Troubleshooting

No Data Showing

Possible Causes:

  1. Request capture is disabled
    • Solution: Enable in settings
  2. No requests match current filters
    • Solution: Broaden filters (e.g., select “All Domains”)
  3. Data retention period expired
    • Solution: Increase retention period in settings

Performance Metrics Not Available

Cause: Performance monitoring is disabled by default.

Solution:

  1. Open Options → Performance Settings
  2. Enable “Capture Performance Metrics”
  3. Choose sampling rate
  4. Reload pages to start capturing metrics

Extension Using Too Much Memory

Solutions:

  1. Reduce maximum stored requests (Settings → General)
  2. Decrease data retention period
  3. Disable performance metrics if not needed
  4. Export and clear old data periodically

Charts Not Rendering

Possible Causes:

  1. No data in selected time range
  2. All requests filtered out
  3. Browser compatibility issue

Solutions:

  1. Check filters and time range
  2. Try refreshing the page
  3. Check browser console for errors

Slow Dashboard Loading

Causes:

Solutions:

  1. Narrow time range
  2. Apply domain filters
  3. Reduce data retention period
  4. Export and archive old data

Data Not Persisting

Cause: Browser storage issues or extension updated.

Solution:

  1. Check browser storage permissions
  2. Export important data regularly
  3. Re-import after updates if needed

Getting Help

Resources

Reporting Issues

When reporting issues, include:

  1. Browser version and OS
  2. Extension version
  3. Steps to reproduce
  4. Screenshots if applicable
  5. Console errors if any

Feature Requests

We welcome feature requests! Please:

  1. Check existing issues first
  2. Describe your use case
  3. Explain expected behavior
  4. Consider contributing a pull request

Version: 1.0.0
Last Updated: December 2024
License: MIT