Network request monitoring with detailed request/response inspection and filtering capabilities. The Network tool automatically captures all HTTP requests and provides comprehensive analysis tools.
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})`);
});The Network monitor provides comprehensive request analysis:
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);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');