cote_network_logger 1.0.8
cote_network_logger: ^1.0.8 copied to clipboard
Beautiful Flutter developer tool for real-time HTTP network monitoring with web dashboard
π CoteNetworkLogger #
A powerful Flutter package for real-time HTTP network monitoring during development.
π οΈ Quick Start (Dio) #
-
Add to your pubspec.yaml:
dependencies: cote_network_logger: ^1.0.5
-
Start the server in your main.dart:
import 'package:cote_network_logger/cote_network_logger.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await startNetworkLogServer(); runApp(MyApp()); }
-
Add the interceptor to your Dio instance:
import 'package:dio/dio.dart'; import 'package:cote_network_logger/cote_network_logger.dart'; final dio = Dio(); dio.interceptors.add(const CoteNetworkLogger());
-
Open http://localhost:3000 in your browser to see the dashboard!
π§ͺ Quick Test (iPhone Simulator) #
To verify everything works on iPhone simulator:
-
Run your Flutter app on iPhone simulator:
flutter run -d iPhone
-
Open the dashboard in your Mac browser:
http://localhost:3000
-
Verify the dashboard is working:
- β You should see "π coTe Network Dashboard"
- β Connection status should show "Live" (green) or "Offline" (red)
- β
Console should show:
π― Dashboard DOM loaded, initializing...
-
Test HTTP requests in your app:
- Tap buttons in your Flutter app to make HTTP requests
- Watch requests appear in real-time on the dashboard
- Try expanding rows to see request/response details
-
If dashboard shows "Waiting for network requests":
- β Dashboard is working correctly
- β Make HTTP requests in your app to see them appear
Common Issues:
- If browser shows "connection refused": Server might not be running
- If dashboard is blank: Check browser console for JavaScript errors
- If requests don't appear: Check that your Dio client has the interceptor added
β¨ Features #
- π Real-time network monitoring - See HTTP requests as they happen
- π± Cross-platform support - Android, iOS, macOS, Windows, Linux
- π Web dashboard - Beautiful browser-based interface
- π¨ Material Design 3 - Modern, responsive UI
- π Advanced filtering - Search, filter by method, status codes
- π Auto-refresh - Smart refresh that pauses during user interaction
- πΎ Memory efficient - In-memory storage with auto-cleanup
- π― Development-only - Automatically disabled in release mode
π§βπ» Advanced Usage #
Manual Logging #
final logger = CoteNetworkLogger();
// Log a request
logger.logRequest(
id: 'unique_request_id',
url: 'https://api.example.com/data',
method: 'GET',
headers: {'Authorization': 'Bearer token'},
requestBody: null,
);
// Log the response
logger.logResponse(
id: 'unique_request_id',
url: 'https://api.example.com/data',
method: 'GET',
statusCode: 200,
headers: {'content-type': 'application/json'},
responseBody: {'data': 'response'},
);
HTTP Package Interceptor #
import 'package:http/http.dart' as http;
import 'package:cote_network_logger/cote_network_logger.dart';
class NetworkLoggerInterceptor extends http.BaseClient {
final http.Client _inner;
final CoteNetworkLogger _logger;
NetworkLoggerInterceptor(this._inner, this._logger);
@override
Future<http.StreamedResponse> send(http.BaseRequest request) async {
final id = DateTime.now().millisecondsSinceEpoch.toString();
// Log request
_logger.logRequest(
id: id,
url: request.url.toString(),
method: request.method,
headers: request.headers,
requestBody: request is http.Request ? request.body : null,
);
try {
final response = await _inner.send(request);
// Log response
final responseBody = await response.stream.bytesToString();
_logger.logResponse(
id: id,
url: request.url.toString(),
method: request.method,
statusCode: response.statusCode,
headers: response.headers,
responseBody: responseBody,
);
// Return new streamed response with the body
return http.StreamedResponse(
Stream.value(responseBody.codeUnits),
response.statusCode,
headers: response.headers,
reasonPhrase: response.reasonPhrase,
);
} catch (e, stackTrace) {
// Log error
_logger.logError(
id: id,
url: request.url.toString(),
method: request.method,
error: e.toString(),
stackTrace: stackTrace.toString(),
);
rethrow;
}
}
}
// Usage example:
final logger = CoteNetworkLogger();
final client = NetworkLoggerInterceptor(http.Client(), logger);
// Use the client for HTTP requests
final response = await client.get(Uri.parse('https://api.example.com/data'));
Example Usage #
class ApiService {
final Dio _dio = Dio();
ApiService() {
// Add the network logger
_dio.interceptors.add(const CoteNetworkLogger());
}
Future<Response> getPosts() {
return _dio.get('https://jsonplaceholder.typicode.com/posts');
}
Future<Response> createPost(Map<String, dynamic> data) {
return _dio.post('https://jsonplaceholder.typicode.com/posts', data: data);
}
}
π Accessing the Dashboard #
The dashboard access method depends on your development setup:
π± iOS Simulator (Best for Mac) #
- Run your Flutter app on iOS simulator
- Open browser on your Mac (host machine)
- Navigate to: http://localhost:3000
π± Android Emulator (Limited Access) #
- Run your Flutter app on Android emulator
- Open browser on the Android emulator itself
- Navigate to: http://localhost:3000
- Make HTTP requests in your app to see them appear!
Note: Due to emulator network isolation, you cannot access the dashboard from your Mac/Windows browser. Use a physical Android device if you want to view the dashboard on your computer.
π± Physical Android Device #
- Find your device's IP address:
- Go to Settings > About > Status > IP Address
- Example:
192.168.1.100
- Open browser on any device on the same network
- Navigate to: http://YOUR_DEVICE_IP:3000
- Example:
http://192.168.1.100:3000
- Example:
π± Physical iOS Device #
- Find your device's IP address:
- Go to Settings > Wi-Fi > Your Network > IP Address
- Example:
192.168.1.101
- Open browser on any device on the same network
- Navigate to: http://YOUR_DEVICE_IP:3000
- Example:
http://192.168.1.101:3000
- Example:
π§ iOS Local Network Setup (Required for Physical iOS Devices)
When running on a physical iPhone/iPad, you must enable Local Network permissions:
-
Go to iOS Settings:
Settings > Privacy & Security > Local Network
-
Find your app in the list and toggle it ON
-
Alternative method if app doesn't appear:
- Run your Flutter app once
- Try to access the dashboard from your Mac browser
- iOS will show a popup asking for Local Network permission
- Tap "Allow"
-
Verify permissions:
- Look for console message:
β Your device IP: xxx.xxx.xxx.xxx
- If you see IP address, permissions are working correctly
- Look for console message:
π iOS Troubleshooting Checklist
β Dashboard not accessible from Mac browser?
- β Local Network permission enabled for your app?
- β Both iPhone and Mac on same Wi-Fi network?
- β Using correct IP address (not
localhost
)? - β Server started successfully? (check debug console)
β Working setup should show:
flutter: π NetworkLogWebServer: Starting server on 0.0.0.0:3000...
flutter: β
NetworkLogWebServer: Server started successfully!
flutter: π Network Logger Dashboard: http://localhost:3000 (simulator) or http://YOUR_MAC_IP:3000 (physical device)
flutter: π± Physical iPhone: Open http://192.168.1.101:3000 in Safari
flutter: β
Your device IP: 192.168.1.101
π» Desktop (macOS/Windows/Linux) #
- Run your Flutter app
- Open browser on the same machine
- Navigate to: http://localhost:3000
π― Dashboard Features #
Real-time Monitoring #
- β‘ Auto-refresh every 3 seconds
- π€ Smart pause during user interaction (15 seconds)
- π Live statistics (total requests, errors, last updated)
Advanced Filtering #
- π Search by URL, method, status code
- π·οΈ Filter by HTTP method (GET, POST, PUT, DELETE, PATCH)
- π Filter by status code (2xx Success, 4xx Client Error, 5xx Server Error)
Beautiful Interface #
- π¨ Material Design 3 with gradients and animations
- π± Responsive design for all screen sizes
- π Syntax-highlighted JSON with collapsible sections
- π Copy JSON functionality with visual feedback
- π Perfect scrolling with position preservation
π§ͺ Testing the Setup #
Run the test example to verify everything works:
flutter run example/test_dashboard.dart
This will:
- Start the dashboard server
- Show you the correct URL for your platform
- Provide test buttons to make HTTP requests
- Verify the dashboard receives and displays the requests
π§ Troubleshooting #
Dashboard Not Loading #
Android Emulator Issue
Problem: "Can't access http://localhost:3000 from Mac browser"
Solution: Android emulator network is isolated from the host machine:
- β
Correct: Open browser on the Android emulator and go to
http://localhost:3000
- β Incorrect: Trying to access from your Mac/Windows browser (this won't work)
- π‘ Better option: Use iOS Simulator or a physical Android device for better dashboard access
Network Connectivity
Problem: "Connection refused" or "Can't connect"
Solutions:
- Check server is running: Look for console message
β NetworkLogWebServer: Server started successfully!
- Verify platform support: Only works on Android, iOS, macOS, Windows, Linux (not web browsers)
- Check debug mode: Only works in debug mode, not release builds
- Firewall: Ensure port 3000 is not blocked
Physical Device Issues
Problem: "Can't access dashboard from other devices"
Solutions:
- Same network: Ensure both devices are on the same Wi-Fi network
- Correct IP: Use the device's IP address, not
localhost
- Firewall: Check device firewall settings allow incoming connections
Performance Issues #
Memory Usage
- Dashboard automatically keeps only the last 200 logs
- Old logs are automatically cleaned up
- No persistent storage - everything is in memory
Auto-refresh Interruption
- Dashboard pauses auto-refresh during user interaction
- Scrolling in JSON containers pauses for 15 seconds
- Main scrolling pauses for 10 seconds
- Manual refresh button always available
π API Reference #
CoteNetworkLogger #
Methods
// Start the dashboard server
Future<bool> startDashboard()
// Log an HTTP request
void logRequest({
required String id,
required String url,
required String method,
Map<String, dynamic>? headers,
dynamic requestBody,
})
// Log an HTTP response
void logResponse({
required String id,
required String url,
required String method,
required int statusCode,
Map<String, dynamic>? headers,
dynamic responseBody,
})
// Log an HTTP error
void logError({
required String id,
required String url,
required String method,
required String error,
String? stackTrace,
})
// Check if web server is supported
bool get isWebServerSupported
// Get dashboard URL
String get dashboardUrl
// Check if dashboard is running
bool get isDashboardRunning
π¨ Dashboard Screenshots #
Main Interface #
[Dashboard Overview]
Request Details #
[Request Details]
Filtering #
[Advanced Filtering]
Side by Side #
[Side by Side]
π€ Contributing #
Contributions are welcome! Please feel free to submit a Pull Request.
π License #
This project is licensed under the MIT License - see the LICENSE file for details.
π Get Started #
Ready to monitor your HTTP requests? Install the package and start logging!
flutter pub add cote_network_logger
Happy debugging! πβ¨
π₯οΈ Platform Compatibility & Access Table #
How to Access the Dashboard on Different Platforms #
Platform | Where to Run App | How to Access Dashboard | Supported? | Notes |
---|---|---|---|---|
iOS Simulator (Mac) | iOS Simulator | Mac browser: http://localhost:3000 |
β | Seamless, shares Mac network |
Android Emulator | Android Emulator | Emulator browser: localhost:3000 |
β | Only accessible from emulator browser |
Android Emulator | Android Emulator | Mac/Windows browser: localhost:3000 |
β | Not possible due to network isolation |
Physical Android | Android Device | Mac/Windows browser: http://DEVICE_IP:3000 |
β | Both devices must be on same WiFi |
Physical iOS | iPhone/iPad | Mac browser: http://DEVICE_IP:3000 |
β | Both devices must be on same WiFi |
Desktop (Mac/Win) | Mac/Windows/Linux | Local browser: http://localhost:3000 |
β | Easiest for desktop apps |
π© Important Notes #
localhost
in your Mac/Windows browser is not the same aslocalhost
in the Android emulator.- The iOS Simulator shares the host network, so
localhost:3000
works from your Mac browser. - The Android Emulator is isolated; you cannot access its server from your Mac/Windows browser at
localhost:3000
. - For Android Emulator, use the emulator's browser to view the dashboard, or use a physical device for cross-device access.
- For physical devices, use the device's IP address in your browser.
π οΈ Troubleshooting #
- If you see
ERR_CONNECTION_REFUSED
in your Mac/Windows browser when using the Android emulator, this is expected due to emulator network isolation. - For seamless dashboard access on your computer, use iOS Simulator or a physical device.
- For Android development, prefer a physical device if you want to view the dashboard on your computer.