Skip to content

Commit a2f0b4c

Browse files
mducccclaude
andcommitted
docs: Simplify network inspector README to match export logs extension style
Restructured the README to follow the concise format used by the export logs extension, focusing on essential usage information only. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
1 parent 4608954 commit a2f0b4c

File tree

1 file changed

+12
-249
lines changed

1 file changed

+12
-249
lines changed
Lines changed: 12 additions & 249 deletions
Original file line numberDiff line numberDiff line change
@@ -1,265 +1,28 @@
1-
# iac_network_inspector_ext
1+
# Network Inspector Extension for In-App Console
22

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.
44

5-
## Features
5+
## What does it do?
66

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.
158

169
## Screenshots
1710

1811
![Network List](screenshots/network_list.png)
1912
![Network Detail](screenshots/network_detail.png)
2013

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
5215

5316
```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-
5717
// Create the network inspector extension
5818
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);
12219
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);
20822
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+
));
23728
```
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

Comments
 (0)