Inspectro Documentation

Introduction

Inspectro is a VS Code extension that inspects your running frontend. It ties your component tree, your source, and your app's runtime behavior together in one panel, so you can see what a component is, where it lives, and what it's doing, one click from your editor.

The one thing to remember: component ↔ source ↔ runtime, connected live. Everything else is an instrument built on top of that link.

How it works

Inspectro doesn't wrap your app or ask you to change your code. When you start your dev server, it runs an HTTP proxy that injects a lightweight agent into the running app. The agent streams what the app is doing (component tree, network, renders) to the DevTools panel over a WebSocket, and the Debug tab attaches over the Chrome DevTools Protocol.

Your framework's components resolve into one common model, so the same tree and the same instruments work across React, Next.js, Angular and Vue.js, with the framework-specific caveats listed below.

The panel is seven tabs (Inspector, Network, Performance, Cookies, Accessibility, Coverage and Debug) with a live Preview always docked on the right, a Console drawer for unified server and browser logs, and Settings a click away.

Supported Frameworks

Every framework below was tested against a running demo app, not inferred from documentation. A framework is only listed as supported when the whole feature set works. A debugger that half-works misleads you, which is worse than one that tells you up front it is not ready.

Requirements

Inspectro reads a running app, not your files on disk. These have to be true before it can show you anything.

Known Limitations

These apply in every framework, including React. They are properties of how component metadata reaches the browser, not bugs in one adapter.

Getting Started

There's no CLI and no code changes to start. Install Inspectro, open your project, and run your dev server as usual. Inspectro auto-detects your framework and its port, injects its agent and opens the panel.

Installation

Inspectro installs straight from the VS Code Marketplace: no terminals, no package managers, no configuration required to start.

Configuration

Zero config to start. When you want to tune behavior, every option lives in VS Code Settings under the inspectro.* namespace, and there's no separate config file to maintain.

{
  "inspectro.proxyPort": 0,
  "inspectro.debug.runtime": "dual",
  "inspectro.freshCookiesPerProject": true
}

Features

Eight instruments, one workspace. Each reads the same live link between your components, your source and your running app.

Inspector

Select any element in the running app and see the component that rendered it: its props, its state, and the exact source line. Then edit React props live.

• Framework-aware component tree across React, Next.js, Angular and Vue.js (see Supported Frameworks for the per-framework caveats)
• Live scalar prop editing for React: change a value, watch the UI update
• Props, state, computed, styles and source in one panel
• Element overlays, a layout inspector and click-to-source
• Write prop edits back to source codeComing soon
• Edit CSS at the sourceComing soon

inspectro · inspector

Network

Every fetch and XHR the app makes (request, response, headers, payload and timing) captured continuously and tied to the component that triggered it.

• Continuous fetch / XHR capture, with nothing to arm before it happens
• Full request, response, headers, payload and timing
• Each call correlated to the component that made it

inspectro · network

Performance

Render counts, render timings and the cause of each render for every component in the tree: measurement, not generic analytics.

• Render counts and average render time per component
• Render-cause attribution: what triggered each render
• Wasted-render detection
• UI Time Machine: timeline replay of every render and prop changeComing soon

inspectro · performance

Cookies & Environments

Create, edit and delete cookies for the running app straight from the panel: the session state you control, without a browser round-trip.

• Full cookie CRUD for the running app
• Optional clean cookie jar per project for isolation
• Environment and user switching with JWT auth states and VPN statusComing soon

inspectro · cookies & environments

Accessibility

A live accessibility audit of your running app: an overall score with every issue tied to the exact component at fault.

• Overall 0–100 accessibility score
• Severity-filtered issues wired to the component at fault
• Issues pushed into the VS Code Problems panel
• Errors, warnings and passes stream in as you fix

inspectro · accessibility

Coverage

Line, branch and function coverage from your latest run, shown per file and directory next to your source.

• Line, branch and function coverage from .lcov
• Per-file and per-directory breakdown
• Git-branch context, exportable as JSON
• Coverage V2 dashboard: hotspots and trendsComing soon

inspectro · coverage

Debug

Step through server-rendered and Node/API code (the runtime no other frontend tool lets you debug) with breakpoints synced bidirectionally to VS Code.

• Node CDP for SSR / API: the mature, unique path
• Breakpoints synchronize bidirectionally with VS Code
• Client / browser debugging (beta)
• Watch and conditional breakpoints, flame chartComing soon

inspectro · debug

Preview

The persistent right-side panel: a live preview of the running app with a device toolbar, paint overlays, full ancestry and click-to-source.

• Live preview with a device toolbar, always beside the active tab
• Debug-paint overlays and full component ancestry
• Click-to-source from the running UI

inspectro · preview

Commands & Settings

Inspectro adds these commands to the VS Code command palette (Ctrl/Cmd+Shift+P). Everything else is driven from the panel and the settings above.

Troubleshooting

Changelog

Inspectro is live on the VS Code Marketplace. Every shipped version and what changed in it is on the changelog page.