Flutter Network Monitor

English · 中文

Features

A browser DevTools-style Network panel embedded in VS Code / Cursor for monitoring Flutter HTTP and Socket traffic in real time.

Why This Extension?

Flutter DevTools' Network panel is a separate window that can't live inside your editor. When you're debugging network issues, you constantly switch between your IDE and DevTools — losing context every time.

This extension embeds a full-featured Network panel directly in your editor's bottom panel, right next to your terminal and output. No separate window, no context switching.

Zero code changes required. The extension connects to Dart VM Service (the same protocol Flutter DevTools uses) and reads HTTP/socket profiling data that dart:io records automatically in debug mode. You don't need to add any dependencies or instrumentation to your app.

Request Monitoring

• Real-time HTTP request list with method, URL, status, type, size, and timing
• Socket and WebSocket connection tracking
• Automatic polling at 2-second intervals
• Error detection with detailed error messages for failed requests

Request Detail

• Headers — request headers, response headers, and event log
• Payload — request body with JSON syntax highlighting
• Response — response body with JSON syntax highlighting, image preview for image responses
• Timing — queue/server and download time breakdown with visual bar chart
• Completed request details are cached with configurable limits, so captured bodies can still be inspected after the VM Service disconnects

Filtering & Sorting

• Filter by method: GET, POST, PUT, DELETE, PATCH, WS, Other
• Search by URL keyword
• Click column headers to sort (ascending / descending / default cycle)
• Column widths are resizable and persisted across sessions

Name Display Modes

Configure how the Name column shows URLs via Settings > Flutter Network Monitor > Name Display:

Connection

• Manual URI input
• Saved connection history (up to 20 entries)
• Auto-discovery from Dart debug sessions (via dart.debuggerUris event)
• Connection status indicator (connected / connecting / disconnected / error)

Other

• Right-click context menu: Copy as cURL, Copy URL
• Mock rules: create rules from captured requests, add aliases, edit JSON bodies with validation/formatting, manage them in the Mocks tab, and sync them to your Flutter app through a VM Service extension
• Mock rules automatically re-sync after Flutter hot restart when a new isolate is detected
• Adjustable split view (table + detail panel)
• Detail panel close button resets table to full width
• VS Code theme integration (follows your editor's color scheme)

Mock Responses

The extension can store URL wildcard mock rules locally and sync them to a debug Flutter app. Because Dart VM Service HTTP profiling is read-only, the app must register a service extension and install a client-side interceptor. For Dio:

import 'dart:async';
import 'dart:convert';
import 'dart:developer' as developer;

import 'package:dio/dio.dart';

class FlutterNetworkMockInterceptor extends Interceptor {
  static List<_MockRule> _rules = [];
  static bool _serviceExtensionRegistered = false;

  static void registerServiceExtension() {
    if (_serviceExtensionRegistered) return;

    developer.registerExtension(
      'ext.flutterNetworkMonitor.setMockRules',
      (method, parameters) async {
        final raw = parameters['rulesJson'] ?? '[]';
        final list = jsonDecode(raw) as List<dynamic>;
        _rules = list.map((item) => _MockRule.fromJson(item as Map<String, dynamic>)).toList();
        return developer.ServiceExtensionResponse.result(
          jsonEncode({'ok': true, 'count': _rules.length}),
        );
      },
    );
    _serviceExtensionRegistered = true;
  }

  @override
  Future<void> onRequest(
    RequestOptions options,
    RequestInterceptorHandler handler,
  ) async {
    final rule = _match(options.method, options.uri.toString());
    if (rule == null) {
      handler.next(options);
      return;
    }

    if (rule.delayMs > 0) {
      await Future<void>.delayed(Duration(milliseconds: rule.delayMs));
    }

    handler.resolve(
      Response(
        requestOptions: options,
        statusCode: rule.statusCode,
        data: rule.bodyType == 'json' ? jsonDecode(rule.body) : rule.body,
        headers: Headers.fromMap(
          rule.headers.map((key, value) => MapEntry(key, [value])),
        ),
      ),
      true, // Continue following response interceptors, matching real responses.
    );
  }

  _MockRule? _match(String method, String url) {
    for (final rule in _rules.where((rule) => rule.enabled)) {
      if (rule.method != '*' && rule.method.toUpperCase() != method.toUpperCase()) continue;
      if (_wildcardToRegExp(rule.urlPattern).hasMatch(url)) return rule;
    }
    return null;
  }

  RegExp _wildcardToRegExp(String pattern) {
    final escaped = RegExp.escape(pattern).replaceAll(r'\*', '.*').replaceAll(r'\?', '.');
    return RegExp('^$escaped\$');
  }
}

class _MockRule {
  _MockRule({
    required this.enabled,
    required this.alias,
    required this.method,
    required this.urlPattern,
    required this.statusCode,
    required this.headers,
    required this.body,
    required this.bodyType,
    required this.delayMs,
  });

  final bool enabled;
  final String alias;
  final String method;
  final String urlPattern;
  final int statusCode;
  final Map<String, String> headers;
  final String body;
  final String bodyType;
  final int delayMs;

  factory _MockRule.fromJson(Map<String, dynamic> json) => _MockRule(
        enabled: json['enabled'] == true,
        alias: json['alias'] as String? ?? '',
        method: json['method'] as String? ?? 'GET',
        urlPattern: json['urlPattern'] as String? ?? '',
        statusCode: json['statusCode'] as int? ?? 200,
        headers: Map<String, String>.from(json['headers'] as Map? ?? const {}),
        body: json['body'] as String? ?? '',
        bodyType: json['bodyType'] as String? ?? 'text',
        delayMs: json['delayMs'] as int? ?? 0,
      );
}

// In debug bootstrap:
// FlutterNetworkMockInterceptor.registerServiceExtension();
// dio.interceptors.add(FlutterNetworkMockInterceptor());

Getting Started

1. Run your Flutter app in debug mode

flutter run --debug

Or simply start a debug session from VS Code / Cursor (F5).

2. Connect

The extension will appear in the bottom panel as Network.

• If you started a debug session, the VM Service URI may be auto-discovered
• Otherwise, click Connect and enter the VM Service URI (shown in your debug console, e.g. http://127.0.0.1:XXXXX/XXXXXXXXXX/)
• Past connections are saved for quick reconnection

3. Monitor

Network requests appear in real time as your app makes HTTP calls. Click any request to inspect headers, body, response, and timing details.

Requirements

• Flutter or Dart SDK installed
• App running in debug mode (flutter run --debug or F5 in IDE)
• The VM Service must be accessible (default: http://127.0.0.1:PORT/AUTH_TOKEN/)

Extension Settings

Known Limitations

• Large or binary request/response bodies may be skipped or truncated according to the configured cache limits
• WebSocket message frames are not captured — only the HTTP upgrade handshake and connection metadata are shown
• Mock responses require app-side integration; saved rules alone cannot modify traffic
• Only the main isolate is monitored
• Profiling data is not available in release or profile mode

License

MIT

功能

内嵌于 VS Code / Cursor 底部面板的 Flutter 网络请求监控工具，界面参照浏览器 DevTools 的 Network 面板设计。

为什么做这个插件？

Flutter DevTools 的 Network 面板是一个独立窗口，无法嵌入编辑器。调试网络问题时，你不得不在 IDE 和 DevTools 之间反复切换，频繁丢失上下文。

这个插件将完整的 Network 面板直接嵌入编辑器底部，紧挨终端和输出面板。无需切换窗口，无需跳出编辑流程。

零代码侵入。 插件通过 Dart VM Service（和 Flutter DevTools 使用同一协议）读取 dart:io 在 debug 模式下自动记录的 HTTP/Socket profiling 数据，不需要在项目中添加任何依赖或代码。

请求监控

• 实时展示 HTTP 请求列表：Method、URL、Status、Type、Size、Time
• 支持 Socket 和 WebSocket 连接追踪
• 每 2 秒自动轮询更新
• 失败请求自动识别，展示错误详情

请求详情

• Headers — 请求头、响应头、事件日志
• Payload — 请求体，JSON 语法高亮
• Response — 响应体，JSON 语法高亮；图片响应支持预览
• Timing — 排队/服务端/下载耗时分解，带可视化时间条
• 已完成请求的详情会按可配置上限缓存，VM Service 断开后仍可查看已缓存的历史详情

筛选与排序

• 按 Method 筛选：GET、POST、PUT、DELETE、PATCH、WS、Other
• 按 URL 关键词搜索
• 点击列标题排序（升序 → 降序 → 默认 三击循环）
• 列宽可拖拽调整，跨会话持久化

Name 列显示模式

在 设置 > Flutter Network Monitor > Name Display 中配置：

连接管理

• 手动输入 VM Service URI
• 连接历史自动保存（最多 20 条）
• 从 Dart 调试会话自动发现 URI（通过 dart.debuggerUris 事件）
• 连接状态指示：已连接 / 连接中 / 已断开 / 错误

其他

• 右键菜单：复制为 cURL、复制 URL
• Mock 规则：可从已捕获请求快速创建规则，支持别名、JSON body 校验/格式化，在 Mocks 标签页中管理，并通过 VM Service extension 同步到 Flutter 应用
• Flutter 热重启产生新 isolate 后，Mock 规则会自动重新同步到 App
• 可拖拽分屏视图（请求列表 + 详情面板）
• 关闭详情面板后表格自动撑满宽度
• 完整适配 VS Code / Cursor 主题色

Mock 响应

插件可以本地保存 URL 通配符 mock 规则，并同步到 debug 模式下的 Flutter 应用。由于 Dart VM Service 的 HTTP profiling 是只读数据，应用侧必须注册 service extension，并在网络客户端中接入拦截器。Dio 示例见英文部分的 FlutterNetworkMockInterceptor：

// debug 启动时注册同步入口并安装拦截器
FlutterNetworkMockInterceptor.registerServiceExtension();
dio.interceptors.add(FlutterNetworkMockInterceptor());

如果你的 Dio 后面还有统一响应解包 / 错误处理 interceptor，请在 mock interceptor 中使用 handler.resolve(response, true)，让 mock 响应继续走后续 response interceptors，行为与真实请求一致。

快速开始

1. 以 debug 模式运行 Flutter 应用

flutter run --debug

或在 VS Code / Cursor 中按 F5 启动调试。

2. 连接

插件会出现在底部面板，名为 Network。

• 如果通过调试会话启动，VM Service URI 可能被自动发现
• 否则点击 Connect，输入 VM Service URI（在调试控制台中可以看到，格式如 http://127.0.0.1:XXXXX/XXXXXXXXXX/）
• 历史连接自动保存，可快速重连

3. 监控

应用发起 HTTP 请求后会实时显示在列表中。点击任意请求可查看 Headers、Body、Response 和 Timing 详情。

环境要求

• 已安装 Flutter 或 Dart SDK
• 应用以 debug 模式 运行（flutter run --debug 或 IDE 中按 F5）
• VM Service 可访问（默认 http://127.0.0.1:PORT/AUTH_TOKEN/）

扩展设置

已知限制

• 大体积或二进制请求 / 响应体会根据缓存配置被跳过或截断
• WebSocket 消息帧不会被记录，仅展示 HTTP 升级握手和连接元数据
• Mock 响应需要应用侧接入；仅保存规则无法直接修改流量
• 仅监控主 isolate
• Release 和 Profile 模式下 profiling 数据不可用

License

MIT