🛰️ API Hover Inspector

Live API Testing Inside Your VS Code Editor — Just Hover.

Quick Start • Features • Demo • Configuration • Commands • FAQ

💡 Stop switching between your editor and Postman/Insomnia/Browser. API Hover Inspector turns your VS Code into a live API testing tool. Just hover over any API endpoint URL in your code and instantly see the response — status, latency, headers, and formatted JSON payload — all without leaving your editor.

🎬 Demo — See It In Action

⚡ Hover Over Any Endpoint → Instant Live Response

Simply hover your mouse over any API URL in your code. The extension detects it, makes a live HTTP request, and shows you the complete response in a beautiful popup — status code, latency, size, and formatted JSON — all in under a second.

🔍 Full Inspector Panel — Deep Dive Into Responses

Click "Open Inspector Panel" for a full-featured side panel with tabbed views for Response body, Headers, and one-click actions like Re-fetch and Copy JSON. Perfect for detailed API debugging.

📊 Sidebar History — Track Every API Call

Every API call is logged in the Activity Bar sidebar. See color-coded status dots (🟢 200, 🟡 404, 🔴 500), response times, timestamps, and quickly re-inspect any previous call.

✨ Features At a Glance

🆚 Why API Hover Inspector?

🚀 Quick Start

1️⃣ Install

Search "API Hover Inspector" in VS Code Extensions (Ctrl+Shift+X), or:

code --install-extension SurajKumarPrajapati.api-hover-inspector

2️⃣ Open Any Code File

Open a file containing API endpoint URLs — JavaScript, TypeScript, React, Python, Go, JSON, or any supported language.

3️⃣ Hover Over an Endpoint

Move your cursor over any API URL string:

// ✅ Hover over the URL → see live response instantly!
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

That's it! The live response popup appears automatically. 🎉

🌐 Supported Languages & Patterns

12 Languages Supported

Smart URL Detection Examples

// ─── Full URLs ──────────────────────────────────────
fetch('https://api.example.com/users')
axios.get('http://localhost:8080/api/v1/products')

// ─── Relative Routes (resolved via Base URL) ───────
fetch('/api/users/profile')
axios.post('/api/todos', { title: 'New Todo' })

// ─── Environment Variables (auto-resolved!) ────────
fetch(process.env.API_URL + '/posts')
fetch(`${process.env.REACT_APP_API_BASE}/users`)
axios.get(`http://localhost:${process.env.PORT}/api/data`)

// ─── Template Literals ─────────────────────────────
fetch(`https://api.example.com/users/${userId}`)

# ─── Python ──────────────────────────────────────────
import requests
response = requests.get('https://api.example.com/data')
response = requests.post('https://api.example.com/users', json=payload)

// ─── Go ─────────────────────────────────────────────
resp, err := http.Get("https://api.example.com/items")
resp, err := http.Post("https://api.example.com/submit", "application/json", body)

🔍 Hover Popup — Everything at Your Fingertips

When you hover over a detected API endpoint, you'll see a rich, interactive popup:

┌─────────────────────────────────────────────────────────┐
│  🟢 API Live Response                                  │
│                                                         │
│  ┌──────────┬──────────────┬──────────┬────────────┐    │
│  │ Method   │ Status       │ Latency  │ Size       │    │
│  │ GET      │ 200 OK       │ ⏱️ 45ms  │ 📦 1.2 KB  │    │
│  └──────────┴──────────────┴──────────┴────────────┘    │
│                                                         │
│  Endpoint: https://api.example.com/users/1              │
│                                                         │
│  Payload Preview:                                       │
│  ┌─────────────────────────────────────────────────┐    │
│  │ {                                               │    │
│  │   "id": 1,                                      │    │
│  │   "name": "John Doe",                           │    │
│  │   "email": "john@example.com",                  │    │
│  │   "role": "admin"                               │    │
│  │ }                                               │    │
│  └─────────────────────────────────────────────────┘    │
│                                                         │
│  ─────────────────────────────────────────────────────  │
│  🔄 Refresh | ✏️ Edit URL | ⚙️ Query Params            │
│  📝 POST Data | 🔢 Change ID | 🔑 Set Auth             │
│  📋 Copy JSON | 🔍 Open Inspector Panel                │
└─────────────────────────────────────────────────────────┘

🎯 Quick Action Links (in every popup)

🔍 Inspector Webview Panel

For detailed API inspection, click "Open Inspector Panel" to get a full side panel:

What you get:

• 📑 Response Tab — Complete syntax-highlighted JSON with full formatting
• 📋 Headers Tab — All response headers in a clean table
• 🔄 Re-fetch Button — Trigger a fresh request from the panel
• 📋 Copy to Clipboard — One-click copy of the full JSON response

Open anytime via Command Palette: Ctrl+Shift+P → API Hover Inspector: Open Live Inspector Panel

🌐 Environment Variable Resolution

API Hover Inspector automatically reads your .env and .env.local files — no setup needed.

Setup

Step 1: Add a .env file to your workspace root:

# .env
PORT=8080
API_URL=https://api.staging.example.com
REACT_APP_API_BASE=http://localhost:3001/api
AUTH_TOKEN=eyJhbGciOiJIUzI1NiIs...
BASE_URL=http://localhost:5000

Step 2: Use variables in your code — they resolve automatically on hover:

// 🔄 These all resolve automatically when you hover!

fetch(`http://localhost:${process.env.PORT}/api/users`)
// ➜ Resolves to: http://localhost:8080/api/users

fetch(process.env.API_URL + '/posts')
// ➜ Resolves to: https://api.staging.example.com/posts

axios.get(process.env.REACT_APP_API_BASE + '/todos')
// ➜ Resolves to: http://localhost:3001/api/todos

Framework Auto-Detection 🔧

The extension automatically detects server ports from popular frameworks:

Base URL with Env Variables

{
  "apiHoverInspector.baseUrl": "http://localhost:${PORT}"
}

🔐 Authentication — Setting Auth Headers

Method 1: Via Hover Popup (Fastest ⚡)

Click 🔑 Set Auth Header in any hover popup → enter your token → done!

Method 2: Via Command Palette

Ctrl+Shift+P → API Hover Inspector: Set Authorization Header / Bearer Token

Method 3: Via Settings (Persistent)

{
  "apiHoverInspector.headers": {
    "Accept": "application/json",
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIs...",
    "X-API-Key": "your-api-key-here"
  }
}

Method 4: Using .env Variables (Most Secure 🔒)

// settings.json
{
  "apiHoverInspector.headers": {
    "Authorization": "Bearer ${AUTH_TOKEN}"
  }
}

# .env (git-ignored, never committed!)
AUTH_TOKEN=eyJhbGciOiJIUzI1NiIs...

⚙️ Configuration

Configure via VS Code Settings (Ctrl+,) or settings.json:

📝 Example settings.json

{
  // Base URL for relative endpoints
  "apiHoverInspector.baseUrl": "http://localhost:8080",
  
  // Auto-fetch on hover (set false for manual trigger)
  "apiHoverInspector.autoFetch": true,
  
  // Cache responses for 2 minutes
  "apiHoverInspector.cacheTimeout": 120,
  
  // 10 second timeout for slow APIs
  "apiHoverInspector.timeout": 10000,
  
  // Custom headers with env variable support
  "apiHoverInspector.headers": {
    "Accept": "application/json",
    "Authorization": "Bearer ${AUTH_TOKEN}",
    "X-API-Key": "your-api-key"
  },
  
  // Show up to 100KB in hover popup
  "apiHoverInspector.maxResponseBodyKb": 100
}

📜 Commands

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "API Hover":

📊 Status Bar

The status bar (bottom of VS Code) shows:

• 🌐 Current Base URL — Click to change or switch environments
• ⚡ Auto-fetch toggle — Quick on/off control

Click the status bar item for a quick-pick menu with all common actions.

💡 Use Cases

🧑‍💻 Frontend Developer

"I'm building a React app and want to quickly check if my API endpoints return the right data."

Just hover over your fetch() or axios calls to see live responses. No need to open Postman or the browser DevTools.

🔧 Backend Developer

"I want to verify my Express/FastAPI routes are working while coding."

Set your base URL to http://localhost:3000 and hover over route strings like '/api/users' to instantly test them.

📱 Full-Stack Developer

"I switch between frontend and backend constantly and need to test APIs in both."

The extension auto-detects framework ports, reads your .env files, and resolves everything automatically.

🔍 API Debugger

"I need to debug why a specific endpoint returns 401/403/500."

Hover to see the error response, then use the inline 🔑 Set Auth Header or ⚙️ Set Query Params to fix and re-test — all without leaving your code.

📋 Code Reviewer

"I'm reviewing a PR and want to verify the API endpoints mentioned in the code."

Just hover over any URL in the diff to instantly check if it's live and returning expected data.

❓ FAQ & Troubleshooting

🗺️ Roadmap

• [ ] 🎯 GraphQL support — Detect and execute GraphQL queries on hover
• [ ] 📊 Response diff — Compare responses between environments (dev vs staging)
• [ ] 📁 Export collections — Export endpoint history as Postman/Insomnia collections
• [ ] 🎨 Custom themes — Customizable hover popup and inspector panel themes
• [ ] 🔄 WebSocket support — Live WebSocket message preview
• [ ] 📈 Performance metrics — Track API response time trends over time

🤝 Contributing

Contributions, issues, and feature requests are welcome! See CONTRIBUTING.md for guidelines.

# Clone and setup
git clone https://github.com/api-hover-inspector/api-hover-inspector.git
cd api-hover-inspector
npm install

# Development build with watch
npm run watch

# Press F5 in VS Code to test

📄 License

MIT © API Hover Inspector — See LICENSE for details.

🙏 Support the Project

If API Hover Inspector helps your workflow:

• ⭐ Star the repo on GitHub
• 📝 Leave a review on the VS Code Marketplace
• 🐛 Report bugs or request features via GitHub Issues
• 📣 Share with your fellow developers!

Made with ❤️ for developers who want to stay in the flow.
_{Stop context-switching. Start hovering.}