AWS Network Debugger - Chrome Extension

A Chrome DevTools extension that intercepts network requests containing x-amzn-trace-id response headers and fetches the corresponding AWS X-Ray trace details.

Features

• 🔍 Auto-capture: Automatically detects network requests with x-amzn-trace-id in response headers
• 📊 X-Ray Traces: Click any captured request to fetch and display the full X-Ray trace
• 🌳 Trace Tree: Visual segment/subsegment tree with timeline bars and duration info
• 📋 Lambda CloudWatch Logs: Dive deep into Lambda invocations — click "📋 Logs" on any Lambda segment to fetch and view the CloudWatch logs for that specific execution
• 🔐 AWS Credentials: Securely configure AWS credentials (Access Key, Secret Key, optional Session Token)
• 🎨 Dark Theme: Clean, DevTools-matching dark UI

Installation

Build from source

# Install dependencies
npm install

# Build the extension
npm run build

Load in Chrome

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode (toggle in top-right)
3. Click Load unpacked
4. Select the dist/ folder from this project

Usage

1. Open Chrome DevTools (F12 or Ctrl+Shift+I)
2. Find the "AWS X-Ray" tab in the DevTools panel
3. Click the AWS Credentials section header to expand it
4. Enter your AWS credentials:
   • Access Key ID: Your AWS access key
   • Secret Access Key: Your AWS secret key
   • Session Token: (Optional) Required for temporary/STS credentials
   • Region: The AWS region where your X-Ray traces are stored
5. Click Save Credentials
6. Navigate the page — requests with x-amzn-trace-id headers will appear automatically
7. Click any captured request to fetch and view the X-Ray trace details
8. On Lambda segments, click the 📋 Logs button to view the CloudWatch logs for that invocation
   • Logs are filtered by the Lambda request ID when available
   • Use the search bar to filter log lines
   • Toggle word wrap with the ↩ Wrap button

Development

# Watch mode (auto-rebuild on changes)
npm run dev

# Production build
npm run build

# Clean dist folder
npm run clean

Architecture

src/
├── manifest.json        # Chrome Extension Manifest V3
├── devtools.html/js     # DevTools entry point (creates the panel)
├── panel/
│   ├── panel.html       # Panel UI layout
│   ├── panel.js         # Main logic (network capture, X-Ray API calls)
│   └── panel.css        # Dark theme styling
└── icons/               # Extension icons

Requirements

• Chrome 88+
• AWS credentials with xray:BatchGetTraces and logs:FilterLogEvents permissions
• The inspected page must return x-amzn-trace-id in response headers

IAM Policy

Minimum required IAM policy for the AWS credentials:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "xray:BatchGetTraces",
      "Resource": "*"
    },
    {
      "Effect": "Allow",
      "Action": "logs:FilterLogEvents",
      "Resource": "arn:aws:logs:*:*:log-group:/aws/lambda/*"
    }
  ]
}

Security Note

⚠️ Credentials are stored in chrome.storage.local which is not encrypted. Use temporary credentials (STS/SSO) when possible for improved security.