Flutter Net Inspector

A VSCode extension that gives you a real-time network inspector dashboard for your Flutter app — inspect live HTTP traffic, mock any endpoint, set breakpoints on responses, and replay requests, all without leaving VSCode.

Think of it as Flipper/Stetho for Flutter, built into your editor.

Requirements

• The companion Dart package flutter_net_inspector must be added to your Flutter app.
• VSCode 1.85 or later.

Getting started

1. Install the Dart package

# pubspec.yaml
dependencies:
  flutter_net_inspector: ^0.1.0

Wire up the interceptor and call connect() in debug mode. Full setup guide: pub.dev/packages/flutter_net_inspector.

2. Open the dashboard

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run:

Flutter Net Inspector: Open Dashboard

The WebSocket server starts automatically and the dashboard opens in a panel. Run your Flutter app — traffic appears in real time.

Features

Live traffic capture

Every HTTP request and response is captured as it happens — method, status code, URL, headers, body, and timing. Filter by URL, method, or status code. Sort by time. Click any row to inspect full details.

Mock responses

Intercept any endpoint and return a custom response — status code, headers, body, and optional simulated latency — without touching your server or app code. Mocked entries are highlighted in the list so you always know what's real.

Right-click any captured request and choose Mock this to open the mock editor pre-filled with that request's data.

Breakpoints

Pause a response mid-flight, inspect and edit its body or status code in the VSCode panel, then resume it. Useful for testing how your app handles edge-case server responses without needing a real server that returns them.

Request replay

Re-fire any previously captured request from the dashboard with one click.

Mock rule persistence

Mock rules are saved to .vscode/net-inspector-rules.json in your workspace. Commit this file to share mock setups with your team. Rules are restored automatically the next time the extension activates.

UI walkthrough

Inspect live traffic — Click three-dots for actions

Every request appears as it happens. Open the context menu to mock the endpoint, replay the request, or copy it as a cURL command. Click the row to open the detail panel with full headers, body, and timing.

Configure a mock response

The mock editor opens pre-filled from the selected request. Adjust the status code, headers, response body, or add a simulated delay — then save. The rule takes effect on the next matching request immediately.

See the mock in action

The intercepted row is highlighted with a purple indicator. The detail panel shows the mocked response body, and your Flutter app receives exactly the data you configured.

Dashboard overview

Extension settings

Commands

Real device setup

By default the Dart package connects to 127.0.0.1:9555. For a physical device you need to point it at your machine's LAN IP, or use adb reverse for Android:

adb reverse tcp:9555 tcp:9555

See the Dart package README for full host configuration options.