tessl/npm-eruda

Console for Mobile Browsers providing comprehensive debugging tools for mobile web development

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Network Monitor

Name: tessl/npm-eruda
Author: tessl

Network request monitoring with detailed request/response inspection and filtering capabilities. The Network tool automatically captures all HTTP requests and provides comprehensive analysis tools.

Capabilities

Request Management

Manage and inspect network requests with detailed information.

/**
 * Clear all captured network requests
 */
clear(): void;

/**
 * Get array of all captured network requests
 * @returns Array of request objects with detailed information
 */
requests(): RequestObject[];

interface RequestObject {
  /** Unique request identifier */
  id: string;
  /** Request name/filename */
  name: string;
  /** Full request URL */
  url: string;
  /** HTTP method (GET, POST, etc.) */
  method: string;
  /** HTTP status code */
  status: number;
  /** Content type */
  type: string;
  /** Content subtype */
  subType: string;
  /** Response size in bytes */
  size: number;
  /** Request duration in milliseconds */
  time: number;
  /** Formatted time for display */
  displayTime: string;
  /** Request start timestamp */
  startTime: number;
  /** Request end timestamp */
  endTime: number;
  /** Request headers */
  reqHeaders: Record<string, string>;
  /** Response headers */
  resHeaders: Record<string, string>;
  /** Request body data */
  data: any;
  /** Response text */
  resTxt: string;
}

Usage Examples:

const network = eruda.get('network');

// Clear all requests
network.clear();

// Get all captured requests
const allRequests = network.requests();
console.log('Total requests:', allRequests.length);

// Analyze requests
const failedRequests = allRequests.filter(req => req.status >= 400);
const largeRequests = allRequests.filter(req => req.size > 1024 * 1024); // > 1MB

// Log request details
allRequests.forEach(req => {
  console.log(`${req.method} ${req.url} - ${req.status} (${req.displayTime})`);
});

Features

The Network monitor provides comprehensive request analysis:

Automatic Request Capture

XMLHttpRequest: Captures all XHR requests
Fetch API: Monitors fetch() calls
Image Loading: Tracks image resource requests
Script/CSS: Monitors resource loading
WebSocket: Basic WebSocket connection monitoring

Request Details

Headers: Complete request and response headers
Payload: Request body data (JSON, form data, etc.)
Response: Full response content with formatting
Timing: Request duration and timing information
Status: HTTP status codes with descriptions

Filtering and Search

URL Filter: Filter requests by URL pattern
Method Filter: Filter by HTTP method
Status Filter: Show only failed requests, etc.
Content Type: Filter by response content type
Search: Text search across request data

Export and Analysis

cURL Export: Generate cURL commands for requests
HAR Export: Export requests in HAR format
JSON Export: Export request data as JSON
Copy to Clipboard: Copy request/response data

Real-time Monitoring

Live Updates: Requests appear as they happen
Recording Toggle: Enable/disable request capture
Performance Metrics: Request timing and size analysis
Error Highlighting: Failed requests clearly marked

Advanced Usage Examples:

const network = eruda.get('network');

// Monitor API calls
function monitorApiCalls() {
  const requests = network.requests();
  const apiCalls = requests.filter(req => 
    req.url.includes('/api/') && req.method !== 'OPTIONS'
  );
  
  console.log('API Calls Summary:');
  apiCalls.forEach(req => {
    const status = req.status >= 400 ? '❌' : '✅';
    console.log(`${status} ${req.method} ${req.url} (${req.displayTime})`);
  });
}

// Find slow requests
function findSlowRequests(threshold = 1000) {
  const requests = network.requests();
  const slowRequests = requests.filter(req => req.time > threshold);
  
  if (slowRequests.length > 0) {
    console.warn(`Found ${slowRequests.length} slow requests (>${threshold}ms):`);
    slowRequests.forEach(req => {
      console.warn(`${req.method} ${req.url} - ${req.displayTime}`);
    });
  }
}

// Monitor for errors
function checkForErrors() {
  const requests = network.requests();
  const errors = requests.filter(req => req.status >= 400);
  
  if (errors.length > 0) {
    console.error(`Found ${errors.length} failed requests:`);
    errors.forEach(req => {
      console.error(`${req.status} ${req.method} ${req.url}`);
    });
  }
}

// Periodic monitoring
setInterval(() => {
  monitorApiCalls();
  findSlowRequests(2000);
  checkForErrors();
}, 10000);

// Clear old requests periodically
setInterval(() => {
  const requests = network.requests();
  if (requests.length > 100) {
    network.clear();
    console.log('Cleared old network requests');
  }
}, 60000);

Integration with Other Tools

The Network tool integrates seamlessly with other Eruda tools:

// Combine with console for detailed logging
const network = eruda.get('network');
const console = eruda.get('console');

// Log all requests to console
function logNetworkActivity() {
  const requests = network.requests();
  const recent = requests.slice(-10); // Last 10 requests
  
  console.group('Recent Network Activity');
  recent.forEach(req => {
    const statusColor = req.status >= 400 ? 'error' : 'log';
    console[statusColor](`${req.method} ${req.url} - ${req.status}`);
  });
  console.groupEnd();
}

// Use with snippets for quick network analysis
const snippets = eruda.get('snippets');
snippets.add('Network Analysis', logNetworkActivity, 'Log recent network requests');

Install with Tessl CLI