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
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:
| Mode |
Example |
| Last Path (default) |
/users |
| Last Two |
/api/users |
| Path Only |
/api/v1/users |
| Full URL |
https://example.com/api/v1/users |
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
- 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)
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
| Setting |
Default |
Description |
flutterNetworkMonitor.nameDisplay |
lastPath |
How to display the Name column: lastPath, lastTwo, pathOnly, fullPath |
Known Limitations
- Request and response bodies are only available after clicking a request (fetched on-demand)
- WebSocket message frames are not captured — only the HTTP upgrade handshake and connection metadata are shown
- 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 — 排队/服务端/下载耗时分解，带可视化时间条
筛选与排序
- 按 Method 筛选：GET、POST、PUT、DELETE、PATCH、WS、Other
- 按 URL 关键词搜索
- 点击列标题排序（升序 → 降序 → 默认 三击循环）
- 列宽可拖拽调整，跨会话持久化
Name 列显示模式
在 设置 > Flutter Network Monitor > Name Display 中配置：
| 模式 |
示例 |
| 最后路径（默认） |
/users |
| 最后两段 |
/api/users |
| 完整路径 |
/api/v1/users |
| 完整 URL |
https://example.com/api/v1/users |
连接管理
- 手动输入 VM Service URI
- 连接历史自动保存（最多 20 条）
- 从 Dart 调试会话自动发现 URI（通过
dart.debuggerUris 事件）
- 连接状态指示：已连接 / 连接中 / 已断开 / 错误
其他
- 右键菜单：复制为 cURL、复制 URL
- 可拖拽分屏视图（请求列表 + 详情面板）
- 关闭详情面板后表格自动撑满宽度
- 完整适配 VS Code / Cursor 主题色
快速开始
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/）
扩展设置
| 设置项 |
默认值 |
说明 |
flutterNetworkMonitor.nameDisplay |
lastPath |
Name 列显示模式：lastPath、lastTwo、pathOnly、fullPath |
已知限制
- 请求体和响应体需要点击请求后按需获取，不在列表中直接展示
- WebSocket 消息帧不会被记录，仅展示 HTTP 升级握手和连接元数据
- 仅监控主 isolate
- Release 和 Profile 模式下 profiling 数据不可用
License
MIT
