Flutter Network Inspector for VS Code

A fast, lightweight, in-editor alternative to Flutter DevTools Network Inspector for Visual Studio Code. Inspect HTTP & HTTPS traffic from your running Flutter applications (Dio and dart:io HttpClient) on Android, iOS, macOS, Windows, and Linux without switching to an external browser window.

Features

• Zero-Configuration Capture: Automatically connects to your running Flutter application via the Dart VM Service / DDS and profiles network requests in real time without requiring any application code changes.
• Full Dio Support: Inspects Dio GET, POST, PUT, DELETE, and PATCH requests, headers, query parameters, status codes, and response bodies on Android & iOS.
• Companion Interceptor: Includes an optional companion package flutter_network_inspector_dio for inspecting FormData uploads, custom network adapters (cupertino_http, cronet_http), and detailed Dio error types.
• High-Performance Virtualized Table: Custom virtualized DOM viewport handles thousands of historical requests smoothly at 60 FPS without UI freezes or memory bloat.
• Interactive JSON Inspector: Syntax-highlighted, collapsible tree viewer with lazy rendering, copy-by-value, and search for complex JSON payloads.
• Memory Retention Policies: Strict in-memory bounds on retained request count (maxRequests), individual body size (maxBodySizeBytes), and total body budget (maxTotalBodyBudgetMB) with automatic body eviction.
• Security & Privacy First: Automatically redacts Authorization, Proxy-Authorization, Cookie, Set-Cookie, and sensitive query parameters (token, api_key, secret, password) in UI, cURL, and exports.
• cURL & HAR 1.2 Export: Copy sanitized cURL commands directly to your clipboard or export entire network sessions to standard HTTP Archive (HAR 1.2) for analysis in Charles, Proxyman, or Postman.
• Native VS Code Look & Feel: Built exclusively with official VS Code theme variables and accessible styling supporting both Dark and Light themes.

Installation & Getting Started

1. Install Extension

Download the .vsix file or install from the VS Code Extensions panel:

code --install-extension flutter-network-inspector-1.0.0.vsix

2. Launch Your Flutter Application

Start your Flutter app in VS Code debugging mode (F5 or Run -> Start Debugging).

3. Open the Network Inspector

Open the Flutter Network Inspector by clicking the Network icon in the VS Code Activity Bar (left sidebar) or via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Flutter Network Inspector: Open Inspector Panel

4. Connection

• Automatic: If flutterNetworkInspector.autoConnect is enabled (default), the extension discovers your active Flutter debug session and connects automatically.
• Manual: If automatic discovery is disabled or you are connecting to a remote device, run:

  Flutter Network Inspector: Connect to VM Service
  

  and enter your VM Service / DDS URI (e.g., http://127.0.0.1:8181/T-6POZAeusQ=/ or ws://127.0.0.1:8181/T-6POZAeusQ=/ws). Authentication tokens are automatically masked in all extension logs.

Optional Companion Dio Interceptor

For standard JSON REST APIs, zero application changes are required.

If you are using multipart FormData uploads, custom network adapters (such as cupertino_http or cronet_http), or need explicit DioExceptionType inspection, integrate the optional companion interceptor:

pubspec.yaml

dependencies:
  dio: ^5.0.0
  flutter_network_inspector_dio: ^1.0.0

In Your Dart Code

import 'package:dio/dio.dart';
import 'package:flutter_network_inspector_dio/flutter_network_inspector_dio.dart';

final dio = Dio();
dio.interceptors.add(DioNetworkInspector());

Extension Settings

Configure the extension in VS Code Settings (Preferences -> Settings -> Flutter Network Inspector):

Development & Testing

Prerequisites

• Node.js (>= 20.x)
• Dart SDK (>= 3.0.0)
• Flutter SDK (>= 3.0.0)

Build the VS Code Extension

npm install
npm run compile

Run Automated Tests

# Run TypeScript extension tests
npm test

# Run Dart Engine unit tests
cd dart_engine
dart test
dart analyze

# Run Companion Dio package tests
cd ../packages/flutter_network_inspector_dio
dart test
dart analyze

# Run Example Flutter test app
cd ../../example
flutter test
flutter analyze

Package into .vsix

npx vsce package

Architecture & Technical Documentation

• Architecture Deep Dive
• Dio Compatibility & Guide
• Performance & Benchmark Report

Author & Maintainer

• Developer: Vaibhav Ghadge
• Publisher: VroyCLe
• LinkedIn: https://www.linkedin.com/in/vaibhav-ghadge-315841168/

License

MIT