Chrome Requests Visualizer

A Chrome DevTools extension for visualizing network requests, detecting N+1 query patterns, replaying requests, and decoding JWTs. Built for developers who want to debug API calls, identify performance bottlenecks, and inspect authentication tokens.

✨ Features

🔍 Network Request Monitoring

Captures XHR, Fetch, and Document requests made by the current page. Unlike the built-in Network tab, this extension focuses specifically on API calls and provides specialized views for debugging.

• Status indicators - Color-coded dots show request status at a glance
• Search & Filter - Filter by URL, method (GET, POST, etc.), and sort by time/status
• Request count - See filtered vs total request counts

🔗 N+1 Query Detection

Automatically groups requests by URL pattern to identify N+1 query problems:

• /api/users/1, /api/users/2, /api/users/3 → grouped as /api/users/:id (3x)
• Smart pattern detection for IDs, UUIDs, and MongoDB ObjectIDs
• Expandable groups to see individual requests

🌐 Session Persistence

Track requests across page navigations within a browsing session:

• Domain grouping - Requests organized by domain (e.g., github.com, api.github.com)
• Page grouping - Further grouped by page path (/, /repos, /settings)
• Copy as JSON - Export domain or page request summaries
• Retention settings - Configure how long to keep sessions (1 hour to 1 week)

🔄 Request Replay

Replay any captured request with full editing capabilities:

• Edit URL, method, headers, and body before replaying
• Cross-origin support - Requests proxied through background script
• Detailed error reporting - Clear error messages with suggestions
• Response viewer - See status, headers, and body of replay response

🔐 JWT Token Decoder

Automatically detects and decodes JWT tokens in request headers:

• Header & Payload - Decoded and formatted JSON
• Expiration status - Visual indicator for valid/expired tokens
• Configurable headers - Scan Authorization, X-Auth-Token, or custom headers

📋 Copy as JSON

Export request data for documentation or debugging:

• Full request details - URL, method, status, headers, body, response
• Truncated for readability - Large arrays limited to 5 items, strings to 10 lines
• Compact headers - Formatted as ["key: value"] array
• Formatted output - Pretty-printed JSON ready for Slack/README

⚙️ Settings

Customize the extension behavior:

• Session retention - 1 hour, 6 hours, 12 hours, 24 hours, 48 hours, 3 days, or 1 week
• JWT headers - Configure which headers to scan for JWT tokens
• Theme - Light, dark, or system preference

Installation

# Install dependencies
pnpm install

Development

Building the Extension

# Development build with watch mode
pnpm dev

# Production build
pnpm build

Loading in Chrome (Development)

1. Run pnpm build to create the dist folder
2. Open Chrome and navigate to chrome://extensions
3. Enable "Developer mode" (toggle in top-right corner)
4. Click "Load unpacked"
5. Select the dist folder from this project
6. The extension is now installed!

Opening the Extension

1. Open any webpage you want to debug
2. Open Chrome DevTools (F12 or Cmd+Option+I on Mac / Ctrl+Shift+I on Windows/Linux)
3. Look for the "Requests Visualizer" tab in the DevTools panel
4. Start interacting with the page to capture requests

Reloading After Code Changes

After making code changes:

1. Run pnpm build (or keep pnpm dev running for auto-rebuild)
2. Go to chrome://extensions
3. Find "Chrome Requests Visualizer" in the list
4. Click the refresh icon (circular arrow) on the extension card
5. Close and reopen DevTools to see your changes

Tip: You must close and reopen DevTools for panel changes to take effect. Simply refreshing the page won't update the DevTools panel.

Debugging the Extension

• DevTools for DevTools: Right-click inside the Requests Visualizer panel → "Inspect" to open DevTools for the extension itself
• Background script logs: Go to chrome://extensions → Click "Service Worker" link under the extension
• Console errors: Check the DevTools console in both the page and the extension's DevTools

Usage Guide

Requests Tab

Sessions Tab

Settings Tab

Publishing to Chrome Web Store

Pre-Publish Checklist

1. Update version in package.json:

   "version": "1.0.0"

2. Build for production:

   pnpm build

3. Test the production build:

• Load the dist folder as unpacked extension
• Verify all features work correctly
• Check for console errors

3. Create ZIP file:

   cd dist
   zip -r ../request-visualizer.zip .

5. Prepare store assets:

• Icon: 128x128 PNG (already in public/icon/128.png)
• Screenshots: 1280x800 or 640x400 PNG/JPEG
• Promotional images (optional): 440x280 small, 920x680 large

Publishing Steps

1. Go to Chrome Web Store Developer Dashboard
2. Pay one-time $5 developer registration fee (if not already registered)
3. Click "New Item"
4. Upload request-visualizer.zip
5. Fill in store listing:

• Name: Chrome Requests Visualizer
• Summary: Visualize network requests, detect N+1 patterns, decode JWTs
• Description: Full description of features
• Category: Developer Tools
• Language: English

1. Upload screenshots and icons
2. Set visibility (Public/Unlisted)
3. Submit for review (usually takes 1-3 business days)

Updating Published Extension

1. Increment version in package.json
2. Run pnpm build
3. Create new ZIP from dist folder
4. Go to Developer Dashboard → Your extension → "Package" tab
5. Upload new ZIP
6. Submit for review

License

MIT