|
1 | | -# iac_network_inspector_ext |
| 1 | +# Network Inspector Extension for In-App Console |
2 | 2 |
|
3 | | -A powerful network inspector extension for the [in_app_console](https://pub.dev/packages/in_app_console) package. This extension helps developers and testers inspect HTTP/HTTPS network requests made via Dio directly within the Flutter app UI. |
| 3 | +A Flutter plugin that adds network inspection functionality to the [in_app_console](https://pub.dev/packages/in_app_console) package. Inspect HTTP/HTTPS network requests made via Dio directly within your Flutter app UI. |
4 | 4 |
|
5 | | -## Features |
| 5 | +## What does it do? |
6 | 6 |
|
7 | | -- 📡 **Capture All HTTP Methods** - Supports GET, POST, PUT, DELETE, PATCH, and all other HTTP methods |
8 | | -- 📦 **Multipart/Form-Data Support** - Handles complex request types including file uploads |
9 | | -- 🔍 **Detailed Request/Response Viewer** - View full request and response details including headers, body, status codes, and timing |
10 | | -- 📋 **Copy as CURL** - Copy any request as a CURL command for testing in terminal or sharing with team members |
11 | | -- 🏷️ **Tag Support** - Tag different Dio instances (e.g., "API", "Auth", "Payment") to identify request origins |
12 | | -- 🔎 **Search & Filter** - Search URLs and filter by HTTP method or tag |
13 | | -- ⏱️ **Request Timing** - Track request duration and timestamps |
14 | | -- ❌ **Error Handling** - Capture and display network errors with full error details |
| 7 | +This extension captures and displays all network requests from your Dio instances, allowing you to view request/response details, headers, timing, and copy requests as CURL commands. |
15 | 8 |
|
16 | 9 | ## Screenshots |
17 | 10 |
|
18 | 11 |  |
19 | 12 |  |
20 | 13 |
|
21 | | -## Getting started |
22 | | - |
23 | | -### Prerequisites |
24 | | - |
25 | | -- Flutter SDK >= 3.3.0 |
26 | | -- Dart SDK >= 3.5.4 |
27 | | -- [in_app_console](https://pub.dev/packages/in_app_console) package |
28 | | -- [dio](https://pub.dev/packages/dio) package for HTTP requests |
29 | | - |
30 | | -### Installation |
31 | | - |
32 | | -Add the following dependencies to your `pubspec.yaml`: |
33 | | - |
34 | | -```yaml |
35 | | -dependencies: |
36 | | - in_app_console: ^2.0.0 |
37 | | - dio: ^5.0.0 |
38 | | - iac_network_inspector_ext: ^0.0.1 |
39 | | -``` |
40 | | -
|
41 | | -Then run: |
42 | | -
|
43 | | -```bash |
44 | | -flutter pub get |
45 | | -``` |
46 | | - |
47 | | -## Usage |
48 | | - |
49 | | -### Basic Setup |
50 | | - |
51 | | -1. **Create the extension instance:** |
| 14 | +## Register the extension |
52 | 15 |
|
53 | 16 | ```dart |
54 | | -import 'package:iac_network_inspector_ext/iac_network_inspector_ext.dart'; |
55 | | -import 'package:iac_network_inspector_ext/src/core/model/dio_wrapper.dart'; |
56 | | -
|
57 | 17 | // Create the network inspector extension |
58 | 18 | final networkInspector = IacNetworkInspectorExt(); |
59 | | -``` |
60 | | - |
61 | | -2. **Register the extension with InAppConsole:** |
62 | | - |
63 | | -```dart |
64 | | -import 'package:in_app_console/in_app_console.dart'; |
65 | | -
|
66 | | -void main() { |
67 | | - // Register the extension |
68 | | - InAppConsole.instance.registerExtension(networkInspector); |
69 | | -
|
70 | | - runApp(MyApp()); |
71 | | -} |
72 | | -``` |
73 | | - |
74 | | -3. **Add your Dio instances with tags:** |
75 | | - |
76 | | -```dart |
77 | | -// Create your Dio instances |
78 | | -final apiDio = Dio(BaseOptions(baseUrl: 'https://api.example.com')); |
79 | | -final authDio = Dio(BaseOptions(baseUrl: 'https://auth.example.com')); |
80 | | -
|
81 | | -// Register them with the network inspector |
82 | | -networkInspector.addDio(DioWrapper(dio: apiDio, tag: 'API')); |
83 | | -networkInspector.addDio(DioWrapper(dio: authDio, tag: 'Auth')); |
84 | | -
|
85 | | -// Now all requests made with these Dio instances will be captured! |
86 | | -await apiDio.get('/users'); |
87 | | -await authDio.post('/login', data: {'email': '[email protected]'}); |
88 | | -``` |
89 | | - |
90 | | -### Complete Example |
91 | | - |
92 | | -```dart |
93 | | -import 'package:flutter/material.dart'; |
94 | | -import 'package:dio/dio.dart'; |
95 | | -import 'package:in_app_console/in_app_console.dart'; |
96 | | -import 'package:iac_network_inspector_ext/iac_network_inspector_ext.dart'; |
97 | | -import 'package:iac_network_inspector_ext/src/core/model/dio_wrapper.dart'; |
98 | | -
|
99 | | -void main() { |
100 | | - // Enable the console |
101 | | - InAppConsole.kEnableConsole = true; |
102 | | -
|
103 | | - // Create and register network inspector extension |
104 | | - final networkInspector = IacNetworkInspectorExt(); |
105 | | - InAppConsole.instance.registerExtension(networkInspector); |
106 | | -
|
107 | | - // Setup Dio instances |
108 | | - final apiDio = Dio(BaseOptions( |
109 | | - baseUrl: 'https://jsonplaceholder.typicode.com', |
110 | | - )); |
111 | | -
|
112 | | - // Add Dio to network inspector with a tag |
113 | | - networkInspector.addDio(DioWrapper(dio: apiDio, tag: 'JSONPlaceholder')); |
114 | | -
|
115 | | - runApp(MyApp(dio: apiDio)); |
116 | | -} |
117 | | -
|
118 | | -class MyApp extends StatelessWidget { |
119 | | - final Dio dio; |
120 | | -
|
121 | | - const MyApp({required this.dio, Key? key}) : super(key: key); |
122 | 19 |
|
123 | | - @override |
124 | | - Widget build(BuildContext context) { |
125 | | - return MaterialApp( |
126 | | - home: Scaffold( |
127 | | - appBar: AppBar(title: Text('Network Inspector Example')), |
128 | | - body: Center( |
129 | | - child: Column( |
130 | | - mainAxisAlignment: MainAxisAlignment.center, |
131 | | - children: [ |
132 | | - ElevatedButton( |
133 | | - onPressed: () async { |
134 | | - // This request will be captured by the network inspector |
135 | | - await dio.get('/users'); |
136 | | - }, |
137 | | - child: Text('Make GET Request'), |
138 | | - ), |
139 | | - ElevatedButton( |
140 | | - onPressed: () async { |
141 | | - // This request will also be captured |
142 | | - await dio.post('/posts', data: { |
143 | | - 'title': 'Test Post', |
144 | | - 'body': 'This is a test', |
145 | | - 'userId': 1, |
146 | | - }); |
147 | | - }, |
148 | | - child: Text('Make POST Request'), |
149 | | - ), |
150 | | - SizedBox(height: 20), |
151 | | - ElevatedButton( |
152 | | - onPressed: () { |
153 | | - // Open the in-app console to view captured requests |
154 | | - InAppConsole.instance.openConsole(context); |
155 | | - }, |
156 | | - child: Text('Open Console'), |
157 | | - ), |
158 | | - ], |
159 | | - ), |
160 | | - ), |
161 | | - ), |
162 | | - ); |
163 | | - } |
164 | | -} |
165 | | -``` |
166 | | - |
167 | | -### Advanced Features |
168 | | - |
169 | | -#### Multiple Dio Instances with Different Tags |
170 | | - |
171 | | -```dart |
172 | | -// E-commerce app example with multiple services |
173 | | -final catalogDio = Dio(BaseOptions(baseUrl: 'https://api.shop.com/catalog')); |
174 | | -final checkoutDio = Dio(BaseOptions(baseUrl: 'https://api.shop.com/checkout')); |
175 | | -final authDio = Dio(BaseOptions(baseUrl: 'https://auth.shop.com')); |
176 | | -
|
177 | | -networkInspector.addDio(DioWrapper(dio: catalogDio, tag: 'Catalog')); |
178 | | -networkInspector.addDio(DioWrapper(dio: checkoutDio, tag: 'Checkout')); |
179 | | -networkInspector.addDio(DioWrapper(dio: authDio, tag: 'Authentication')); |
180 | | -
|
181 | | -// Now you can easily identify which service made which request |
182 | | -``` |
183 | | - |
184 | | -#### Accessing Network History Programmatically |
185 | | - |
186 | | -```dart |
187 | | -// Get all captured network requests |
188 | | -final history = networkInspector.history; |
189 | | -
|
190 | | -// Listen to real-time network events |
191 | | -networkInspector.stream.listen((networkData) { |
192 | | - print('New request captured: ${networkData.url}'); |
193 | | - print('Status: ${networkData.response.statusCode}'); |
194 | | - print('Duration: ${networkData.response.duration}ms'); |
195 | | -}); |
196 | | -
|
197 | | -// Clear history |
198 | | -networkInspector.clearHistory(); |
199 | | -``` |
200 | | - |
201 | | -#### Removing Dio Instances |
202 | | - |
203 | | -```dart |
204 | | -// When you no longer want to track a Dio instance |
205 | | -final wrapper = DioWrapper(dio: apiDio, tag: 'API'); |
206 | | -networkInspector.removeDio(wrapper); |
207 | | -``` |
| 20 | +// Register the extension |
| 21 | +InAppConsole.instance.registerExtension(networkInspector); |
208 | 22 |
|
209 | | -## UI Features |
210 | | - |
211 | | -### Network List View |
212 | | -- Shows all captured requests in reverse chronological order (most recent first) |
213 | | -- Color-coded method badges (GET=blue, POST=green, PUT=orange, DELETE=red) |
214 | | -- Status code badges with color indicators (green for 2xx, orange for 3xx, red for 4xx/5xx) |
215 | | -- Request duration display |
216 | | -- Tag chips for identifying request sources |
217 | | -- Search bar for filtering by URL |
218 | | -- Dropdown filters for method and tag |
219 | | - |
220 | | -### Network Detail View |
221 | | -- **Overview Section**: Method, URL, tag, status code, duration, timestamps |
222 | | -- **Request Section**: Query parameters, headers, and body (formatted JSON) |
223 | | -- **Response Section**: Status, headers, body (formatted JSON), and error details |
224 | | -- **CURL Copy**: Tap the code icon to copy the request as a CURL command |
225 | | - |
226 | | -## Production Usage |
227 | | - |
228 | | -For production builds, you should disable the console: |
229 | | - |
230 | | -```dart |
231 | | -void main() { |
232 | | - // Disable console in production |
233 | | - InAppConsole.kEnableConsole = kDebugMode; |
234 | | -
|
235 | | - // ... rest of your setup |
236 | | -} |
| 23 | +// Add your Dio instances with tags |
| 24 | +networkInspector.addDio(DioWrapper( |
| 25 | + dio: yourDioInstance, |
| 26 | + tag: 'Payment', |
| 27 | +)); |
237 | 28 | ``` |
238 | | - |
239 | | -## Architecture |
240 | | - |
241 | | -The extension follows the **in_app_console** extension architecture: |
242 | | - |
243 | | -1. **IacNetworkInterceptorImpl** - Dio interceptor that captures request/response data |
244 | | -2. **IacNetworkInspectorExtImpl** - Extension implementation that aggregates data from interceptors |
245 | | -3. **IacNetworkRS** - Data model containing request and response information |
246 | | -4. **UI Components** - List and detail screens for viewing network data |
247 | | -5. **CurlGenerator** - Utility to convert requests to CURL commands |
248 | | - |
249 | | -## Contributing |
250 | | - |
251 | | -Contributions are welcome! Please feel free to submit a Pull Request. |
252 | | - |
253 | | -## License |
254 | | - |
255 | | -This project is licensed under the MIT License - see the LICENSE file for details. |
256 | | - |
257 | | -## Additional Information |
258 | | - |
259 | | -- **Repository**: [github.com/mduccc/in_app_console](https://github.com/mduccc/in_app_console) |
260 | | -- **Issues**: [github.com/mduccc/in_app_console/issues](https://github.com/mduccc/in_app_console/issues) |
261 | | -- **Main Package**: [in_app_console](https://pub.dev/packages/in_app_console) |
262 | | - |
263 | | -## Changelog |
264 | | - |
265 | | -See [CHANGELOG.md](CHANGELOG.md) for a list of changes in each version. |
0 commit comments