What is the XHR Inspector?

When a UI interaction fails silently (a button click doesn't save, a page loads with no data, a form submits but nothing happens), the problem lies somewhere in the network layer between your frontend and your backend. The XHR Inspector is Vispane's passive network monitor that intercepts every fetch() and XMLHttpRequest call originating from the previewed page.

Unlike the browser's built-in DevTools Network tab, which mixes in analytics, third-party ads, font loading, and dozens of other irrelevant requests, the XHR Inspector shows you only the API calls your application makes, in a clean, focused interface.

• Live Request Capture: Requests appear in real-time as they occur, with a pulsing live indicator.
• Filter by Status Code: Instantly filter to show only 4xx/5xx errors, helping you spot failures in seconds.
• Filter by Request Type: Narrow down to only XHR, Fetch, or specific asset types.
• URL Search: Free-text search across all captured URLs to find a specific endpoint.
• Expandable Request Details: Click any row to expand it and inspect full request headers, response headers, request body payload, and the full response body.
• Timing Display: Each request shows its exact duration in milliseconds.
• Copy as cURL: Export any captured request directly to the clipboard as a cURL command for terminal debugging or sharing with team members.

Debugging a Silent Form Failure

1. 1

   Open the XHR Inspector

   Click the pulse/wave icon in the Vispane left rail. The panel opens and immediately begins listening. You will see a green pulsing dot indicating "Live".

2. 2

   Reproduce the failing interaction

   In the preview canvas, click the button or submit the form that isn't working. The corresponding request will appear immediately in the feed.

3. 3

   Identify the failed request

   Failed requests are highlighted in red with their HTTP status code (e.g., 422, 500). Click the filter button to show only errors if the feed is busy.

4. 4

   Inspect the payload

   Click the row to expand it. Check the Request Body section: is the data malformed? Is a required field missing or null?

5. 5

   Read the server's error message

   Look at the Response Body. A well-structured API will return a message like "email: this field is required". This tells you exactly what to fix.

6. 6

   Copy as cURL for deeper isolation

   If the error is ambiguous, click "Copy as cURL" and paste the command into the API Explorer to iterate on the request in isolation without needing to interact with the UI again.

Eliminating Manual Token Management

Managing authentication credentials during API testing is one of the most tedious and error-prone activities in a developer's day. Tokens expire silently. You forget the Bearer prefix. You accidentally paste a token with a trailing whitespace that breaks the header format. You have multiple tokens for multiple user roles and can't keep track of which is which.

The Auth Token Manager solves all of this. It stores your credentials locally in your browser's localStorage—never transmitted to Vispane's servers—organized by name, and injects them correctly into the API Explorer with a single click.

• Multi-Type Support: Store JWT tokens (with visual payload decoding), standard Bearer strings, or arbitrary API Keys.
• JWT Expiration Tracking: The manager automatically decodes the exp claim from JWT payloads and shows a live countdown badge: ✓ 4h left, ⚠ 7m left, or ✗ expired 2m ago.
• One-Click Injection: The "Inject into API Explorer" button formats the token with the correct prefix and sets the Authorization header automatically.
• Named Storage: Give each token a descriptive name (e.g., "Admin User JWT", "Guest Account Token", "Production API Key") to manage multiple roles simultaneously.
• Masked Preview: Tokens are masked by default for security when working in shared screen environments.

How to Store and Use a Token

1. 1

   Obtain your token

   Log in through your application's UI and use the XHR Inspector to capture the /login or /auth/token response. Copy the JWT or Bearer string from the response body.

2. 2

   Open the Auth Token Manager

   Click the key/lock icon in the Vispane left rail to open the panel.

3. 3

   Add a new token

   Click "Add Token". Enter a descriptive name, select the type (JWT, Bearer, or API Key), and paste the token string. Click Save.

4. 4

   Inject into API Explorer

   When testing a protected route, click the "⚡ Inject" button next to the appropriate token. The API Explorer's Auth tab will be populated instantly.

Why Environment Management Matters

One of the most catastrophic mistakes in web development is running a destructive test (a bulk delete, a data reset script) against a production database because you forgot to change a hardcoded URL. The Environment Switcher prevents this class of error by design.

Instead of hardcoding https://api.myapp.com into your API requests, you define a variable and configure its value per environment. The Environment Switcher provides strong visual indicators (colored badges) to make your active environment impossible to miss.

• Named Environments: Create unlimited named environments (Local Dev, Staging, Production, etc.).
• Custom Variables per Environment: Each environment can define multiple key-value pairs (e.g., base_url, api_version, tenant_id).
• Preset Templates: Quick-start presets for Local Dev (localhost:3000), Staging, and Production are available one-click.
• Color-Coded Badges: Assign a custom color to each environment. Production should always be Red—a powerful visual safeguard.
• Global Variable Resolution: Variables defined here are resolved across the API Explorer and Mock API Interceptor automatically.
• Frame Reload on Switch: Switching environments automatically reloads all preview frames to the new base URL.

Setting Up Environments

1. 1

   Open the Environment Switcher

   Click the globe icon in the left rail.

2. 2

   Create a "Local Dev" environment

   Click "Add New" or use the preset chip. Set the name to "Local Dev" and URL to http://localhost:3000. Assign it a green color.

3. 3

   Create a "Production" environment

   Add another environment, set the URL to your live domain. Assign it a bright red color to signal danger.

4. 4

   Use variables in all tools

   In the API Explorer, replace hardcoded URLs with /api/v1/endpoint. From now on, switching environments globally updates all requests instantly.

God-Mode Control Over the Network Layer

Building a resilient, professional UI requires testing scenarios that are nearly impossible to trigger reliably in a stable backend: a 500 server crash, a 503 service outage, an empty dataset, an extreme latency spike, or a 429 rate limit error. The Mock API Interceptor gives you total control over these scenarios.

It works by intercepting outgoing fetch() and XMLHttpRequest calls from the proxied page via a bridge script and substituting them with your configured mock responses—entirely without touching the backend or writing any code.

• URL Pattern Matching: Match by exact path or use wildcards (e.g., /api/v1/users/* to intercept any user-specific endpoint).
• Status Code Override: Force any HTTP status code (200, 201, 400, 401, 403, 404, 422, 429, 500, 503…).
• Custom JSON Response Body: Write the exact JSON payload the frontend will receive.
• Latency Injection: Add an artificial delay (in milliseconds) to simulate slow network conditions or database query timeouts.
• Per-Rule Enable/Disable Toggle: Each rule has an individual toggle switch. Turn rules on/off without deleting them.
• Hit Counter: Each rule tracks how many times it has been triggered, shown as a badge on the rule card.
• Persistent Rules: Rules are stored in localStorage and persist across browser restarts.

Testing an Error State End-to-End

1. 1

   Open the Mock API panel

   Click the server/mock icon in the left rail.

2. 2

   Create a new rule

   Click "Add Rule". In the pattern field, enter the endpoint path (e.g., /api/v1/checkout).

3. 3

   Configure the mock response

   Set the Status Code to 500. In the response body, enter {"error": "Internal server error. Please try again."}.

4. 4

   Enable the rule

   Toggle the rule to active (green left border appears on the card).

5. 5

   Trigger the interaction in the UI

   Click "Checkout" in your previewed application. Instead of hitting the real backend, the interceptor returns your mocked 500 response instantly.

6. 6

   Verify your UI handles it correctly

   Does your UI show an error toast? Does the button reset? Does it display the error message correctly? This is exactly what QA tests should cover.

Multi-Frame Console Aggregation

When testing a responsive layout across five different device sizes simultaneously, the standard approach to JavaScript debugging becomes impossible—you'd need to open five separate browser DevTools instances. The Console Panel solves this by intercepting console.log, console.warn, console.error, console.info, and console.debug from every proxy-loaded device frame and rendering them in a single, unified terminal.

• Multi-Frame Aggregation: All messages from all frames appear in one feed, tagged by origin device.
• Log Level Filtering: Filter by All, LOG, INFO, WARN, ERR, or DBG with count badges on each filter button.
• Error Flash Indicator: When any frame throws a JavaScript error, the Console panel button in the rail flashes red to immediately alert you—even if the panel is closed.
• Color-Coded Severity: Each log level has a distinct visual treatment. Errors have a red background tint, warnings have amber, info has blue.
• Clear Logs: One-click to clear the entire feed and start fresh.

Real-World Network Simulation

Your application may perform beautifully on a developer's 1Gbps office network. But what does a user in a rural area on a 3G connection experience? The Network Throttling panel uses a Service Worker to intercept proxy requests and inject precisely calibrated delays and bandwidth caps that reflect actual, measured real-world network conditions.

• Fast 4G / LTE: ~50 Mbps, ~20ms RTT — The best mobile experience.
• Slow 4G: ~4 Mbps, ~100ms RTT — Average LTE coverage.
• Fast 3G: ~1.5 Mbps, ~150ms RTT — Still common in many regions.
• Slow 3G: ~400 Kbps, ~400ms RTT — Rural or weak signal areas.
• Edge / 2G: Very limited bandwidth and very high latency.
• Offline: Completely blocks all network requests — ideal for testing Service Worker offline fallbacks.
• Custom Profile: Define a custom profile with exact download Kbps and RTT delay values for specific testing scenarios.

Testing Under Slow Network Conditions

1. 1

   Open the Network panel

   Click the WiFi/signal icon in the left rail.

2. 2

   Select a throttling profile

   Click the "Slow 3G" profile card. The active profile is visually highlighted with its color accent.

3. 3

   Reload the preview frames

   The throttling takes effect on subsequent requests. Click the reload button to load the page fresh under the new constraints.

4. 4

   Observe the experience

   Watch how long images, fonts, and scripts take to load. Does your loading skeleton appear? Does the page render in a reasonable time? Is the layout stable during loading?

5. 5

   Remove throttling

   Select "No Throttling" to return to full-speed browsing.

Understanding Asset Load Order

The Network Waterfall displays every resource request made during page load (scripts, stylesheets, images, XHR calls, and fonts) as a horizontal timeline bar, visually showing you when each resource started loading and how long it took. This is the definitive tool for identifying why your page renders slowly.

• Grouped by Device Frame: See the waterfall per device (Mobile, Tablet, Desktop) to compare load order across breakpoints.
• Resource Type Filtering: Filter to show only XHR, JS, CSS, or IMG resources.
• URL Search: Search across all resource URLs to find a specific file.
• Total Resource Count: Shows the aggregate number of captured resources.
• Proportional Timeline Bars: Each bar is proportional to the total page load time, making it immediately obvious which resources are blocking others.

The Frontend Performance Dashboard

Google's Core Web Vitals are now a direct ranking factor in search results. The Performance Vitals panel surfaces approximations of these metrics for your previewed application in real time, giving you instant, actionable feedback without deploying to production.

• DOMContentLoaded Timing: The point at which HTML parsing is complete and deferred scripts have run.
• Load Event Timing: When all resources (images, fonts, stylesheets) have fully loaded.
• First Contentful Paint (FCP): When the first visible content (text or image) appears on screen.
• Largest Contentful Paint (LCP): When the largest content element in the viewport becomes visible. Good: <2.5s, Needs Work: <4s, Poor: >4s.
• Cumulative Layout Shift (CLS): Measures unexpected layout shifts. Good: <0.1, Needs Work: <0.25.
• FID / INP Proxy: An approximation of input delay for interaction responsiveness.
• FPS Meter: A live frames-per-second counter powered by requestAnimationFrame. Drops below 30fps indicate jank.
• Total Page Weight: The cumulative size of all loaded resources, helping you track bundle size regression.

Instant Visual Prototyping

The CSS Injector is the fastest possible feedback loop for visual changes. Write CSS in the panel and it appears in every device frame in milliseconds—no build step, no save, no reload. It's the #1 tool for debugging layout issues quickly.

• Multi-Frame Broadcasting: Injected CSS is instantly applied across all active device frames simultaneously via postMessage.
• Named Snippets: Save your custom CSS with a name. Snippets persist and can be toggled on/off individually.
• Preset Library: One-click presets for the most common debugging tasks:
  • Show all outlines — * { outline: 1px solid rgba(255,0,0,0.4) !important; }
  • Show box models — Colors every element's box model for instant padding/margin visualization.
  • Highlight images — Puts a bright amber border on every <img> tag.
  • Grayscale page — Applies filter: grayscale(1) to test accessible color contrast.
  • Disable transitions — Removes all CSS animations for visual debugging.
  • Show focus rings — Forces visible focus outlines for accessibility auditing.
  • Force 16px base font — Resets body font-size for typography testing.
  • Hide images — Hides all images to see text-only layout structure.

Debugging a Layout Bug Across Breakpoints

1. 1

   Open the CSS Injector

   Click the CSS/code icon in the left rail.

2. 2

   Apply "Show all outlines" preset

   Click the preset button. Every element across all device frames instantly shows a red outline, making the box model structure of your layout immediately visible.

3. 3

   Write a targeted fix

   In the text editor, write the CSS fix (e.g., .hero-section { overflow: hidden; }). It applies live as you type.

4. 4

   Verify across all viewports

   Look at the Mobile and Tablet frames side-by-side to confirm the fix works everywhere.

5. 5

   Copy to source code

   Once confirmed, copy the CSS and apply it to your actual source stylesheet.

Your Design Token Inspector

If your application uses a CSS design token system (and it should), this panel gives you instant visibility and control over the entire token set. It scans every stylesheet loaded by the preview frame, extracts all --custom-property declarations, and organizes them by prefix group.

• Automatic Token Discovery: Scans all linked stylesheets to find every --variable.
• Grouped by Prefix: Variables like --color-primary and --color-secondary are grouped under color.
• Live Color Swatches: Any variable whose value is a color shows an interactive color swatch. Click it to open a color picker and modify the value live across all frames.
• Dark Mode Toggle: One-click toggle that sets prefers-color-scheme: dark on the preview frame to test your dark mode styling.
• RTL / LTR Toggle: Flips the document direction between left-to-right and right-to-left to test internationalized layouts.

Pixel-Perfect Color Sampling

The Colorpicker provides a global eyedropper that can sample any pixel on screen—including inside the preview frames—and returns the exact color value in all formats. It eliminates the guesswork of trying to match a design color from a mockup or screenshot.

• Native EyeDropper API: Uses the browser's built-in color sampling with pixel-level accuracy.
• Multi-Format Output: Automatically converts the sampled color to Hex (#3D6EFF), RGB (rgb(61, 110, 255)), and HSL (hsl(229, 100%, 62%)).
• One-Click Copy: Click any format to instantly copy it to the clipboard.
• Recent Swatches Strip: The last 24 sampled colors are saved to a swatches strip, backed by localStorage. They persist across sessions.
• Swatch Copy: Click any saved swatch to copy its hex value instantly.

Pixel-Perfect Measurement Across All Viewports

The Measure Tool is one of Vispane's signature interactions. When active, moving your cursor over any device frame draws a crosshair guide line across the entire canvas with a live HUD showing the exact x/y coordinates in both pixels and rem units. This shared HUD works across every viewport simultaneously—a capability that doesn't exist in any standard browser DevTools.

• Live Crosshair HUD: Continuous x/y position readout that follows the cursor in real time.
• px and rem Units: Displays measurements in both pixel and rem units simultaneously.
• Point-to-Point Distance Measurement: Click once to place an anchor point, then move the cursor to measure the exact distance between two points on the canvas.
• Cross-Frame Operation: The single HUD overlay spans all device frames on the canvas.

Complete Viewport Canvas Control

The Responsive Design panel gives you full control over the multi-viewport canvas at the heart of Vispane. You decide which devices are rendered, at what dimensions, and the premium breakpoint scale tells you exactly which CSS media query is active for each frame.

• Built-In Device Categories: Mobile, Tablet, Laptop, and Desktop presets with industry-standard dimensions.
• Category Filtering: Filter the device list by Mobile, Tablet, Laptop, or Desktop to focus on what matters.
• Toggle Individual Devices: Enable or disable any specific device with a single click. Only the enabled devices render on the canvas.
• Custom Device Presets: Define completely custom viewport dimensions (e.g., 320px for very small phones, 3840px for 4K displays).
• Breakpoint Scale Visualization: A premium visual indicator that maps each active frame's current width to its corresponding CSS breakpoint bucket (xs, sm, md, lg, xl, 2xl).

WCAG 2.1 AA Compliance Scanning

Accessibility is not optional. Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance is a legal requirement in many jurisdictions and a core quality metric for any professional web application. The Accessibility Audit panel scans your live DOM by sending commands to the Vispane proxy bridge, which runs the audit on the live rendered page and returns structured, actionable results.

• Live DOM Scanning: Audits the rendered DOM as it actually appears to users, not just the static HTML source.
• Severity Triage: Issues are sorted into three severity levels: Error (must fix), Warning (should fix), and Info (best practice).
• Specific Violation Types Detected:
  • Images missing alt text attributes.
  • Form inputs missing associated <label> elements.
  • Interactive elements (buttons, links) missing accessible names.
  • Missing lang attribute on the root <html> element.
  • Insufficient color contrast ratios (pairs with the Contrast Checker).
  • Missing ARIA roles and landmark structure.
• Issue Count Summary: A summary badge shows total Error, Warning, and Info counts at a glance.

WCAG Contrast Ratio Verification

Poor color contrast is one of the most common accessibility failures. The WCAG standard requires a minimum contrast ratio of 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA). The Contrast Checker calculates the exact ratio between any foreground and background color combination and provides a clear pass/fail verdict.

• Real-Time Ratio Calculation: The contrast ratio updates live as you adjust either color.
• Dual AA/AAA Compliance Badges: Separate pass/fail indicators for both normal text (AA: 4.5:1) and large text (AA: 3:1).
• Lightness Sliders: Fine-tune the lightness of either color using a slider to find the closest compliant shade without changing the hue.
• Auto-Fix Suggestions: Automatically calculate the nearest lighter or darker shade of the foreground color that achieves AA compliance.
• Visual Preview: Shows a live text preview against the background color so you can see the actual visual result.

Complete SEO & Social Meta Auditing

The invisible <head> metadata of your pages is critical for search engine indexing and social media sharing. Mistakes here are impossible to see visually—but they cost you SEO ranking positions and make your links look broken when shared. The Meta & SEO panel extracts all metadata from the live preview frame and audits it with pass/fail indicators.

• Title Tag Validation: Shows the page title with character count. Flags as Warning if too short (<30 chars) or too long (>60 chars).
• Meta Description Validation: Shows description with character count. Optimal range is 120-158 characters.
• Canonical URL: Displays the canonical link to detect duplicate content issues.
• Robots Directive: Shows the robots meta content to ensure the page is set to index, follow where appropriate.
• Viewport Meta: Validates the presence and content of the responsive viewport meta tag.
• OpenGraph Tags: Validates og:title, og:description, og:image, og:type, and og:url.
• Twitter Card Tags: Validates twitter:card, twitter:title, twitter:description, and twitter:image.
• Structured Data: Detects the presence of JSON-LD structured data markup.

Frame-Level PNG Capture

The Screenshot Tool exports a high-fidelity PNG of any device frame currently rendered on the canvas. Because Vispane loads pages through its server-side proxy on a same-origin context, it avoids the cross-origin "tainted canvas" restriction that blocks screenshot capture in standard browser tools.

• Per-Frame Selection: Choose exactly which device frame to capture (e.g., only the iPhone 14 viewport).
• Viewport vs. Full-Page: Capture only what's visible in the viewport, or automatically scroll and stitch the entire page into one PNG.
• Instant PNG Download: The captured image is downloaded directly to your filesystem.

Full Application State Management

The Application Panel gives you complete visibility and control over every piece of client-side state your application manages. This is essential for testing authentication flows, onboarding sequences, feature flags stored in local storage, and shopping cart persistence.

• localStorage Viewer: Displays all key-value pairs in the application's local storage. Values are formatted for readability.
• sessionStorage Viewer: Shows session-scoped storage that clears when the tab closes.
• Cookie Inspector: Lists all cookies set by the application, including their name, value, domain, path, and expiry. Per-device cookie clearing is supported.
• Service Worker Status: Shows the status of any registered Service Workers (installing, waiting, active).
• Cache Storage Viewer: Lists the caches managed by Service Workers.
• Clear All Storage: One-click nuclear option to clear all localStorage, sessionStorage, and cookies to simulate a fresh first-time user visit.

Catching Every Image Problem

Images are the single largest contributor to slow page loads and layout shifts. A single unoptimized image can cost seconds of load time and crash your CLS score. The Image Audit panel automatically scans every <img> element in the live DOM and flags problems with specific, actionable recommendations.

• Missing alt Text: Flags every image without an alt attribute. Critical for screen readers and SEO.
• Legacy Format Detection: Identifies images using PNG or JPEG where WebP or AVIF would yield 30-80% smaller file sizes.
• Missing loading="lazy": Flags below-the-fold images not using native lazy loading, which delays page ready time unnecessarily.
• Oversized Natural Dimensions: Compares the image's natural (actual) dimensions to its displayed dimensions. A 4000×3000px image displayed at 100×75px is a massive waste of bandwidth.
• Missing width/height Attributes: Flags images without explicit dimensions. This is the #1 cause of Cumulative Layout Shift (CLS)—the browser doesn't know how much space to reserve, so the layout jumps when the image loads.

Understanding Your Typography Loading

Web fonts are one of the most common causes of slow First Contentful Paint (FCP) and Flash of Unstyled Text (FOUT). The Font Inspector uses the browser's native document.fonts API to enumerate every font face loaded in the preview frame, providing visibility into exactly which fonts are active, which are still loading, and which might be blocking the render.

• Font Enumeration: Lists every font family detected across all frames, including their loaded weights and styles (e.g., Inter 400, Inter 700, Inter 400 italic).
• Load Status: Each font shows its current status: Loaded (green), Loading (amber), or Error (red).
• Fallback Detection: Identifies if a fallback system font is currently rendering in place of a custom font.
• Render-Blocking Flag: Detects font loads configured without font-display: swap which block text rendering until the font resolves.