Какие знаешь инструменты для дебагинга в Flutter приложениях?

Инструменты для дебагинга в Flutter приложениях

Эффективный дебаг — это ключ к быстрой разработке. Flutter предоставляет множество мощных инструментов для анализа и исправления проблем.

1. DevTools (основной инструмент)

Flutter DevTools — Web-based IDE для отладки, профилирования и анализа приложений.

# Запуск DevTools
flutter pub global activate devtools
devtools

# Или встроено в VS Code / Android Studio
# В Android Studio: View → Open DevTools

Основные возможности:

• Inspector — анализ виджет-дерева, выделение элементов
• Console — просмотр логов и ошибок
• Debugger — постановка точек останова, пошаговое выполнение
• Performance — анализ производительности и FPS
• Memory — анализ использования памяти, поиск утечек
• Network — просмотр HTTP запросов
• Logging — структурированное логирование

2. Logging (логирование)

Встроенное логирование:

import 'package:flutter/foundation.dart';

void main() {
  // Простой print (виден в DevTools Console)
  print('App started');
  
  // debugPrint — оптимизирован для больших выводов
  debugPrint('Debug message with long text that will be truncated');
}

// В коде
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    debugPrint('MyWidget building');
    return const SizedBox();
  }
}

Продвинутое логирование с пакетом logger:

import 'package:logger/logger.dart';

final logger = Logger(
  printer: PrettyPrinter(
    methodCount: 2, // Количество строк стека для вывода
    errorMethodCount: 8,
  ),
);

void loadData() {
  try {
    logger.i('Loading data from API');
    final data = fetchData();
    logger.d('Data loaded: $data');
  } catch (e, stackTrace) {
    logger.e('Error loading data', error: e, stackTrace: stackTrace);
  }
}

// Уровни логирования:
// logger.v() — verbose (самый детальный)
// logger.d() — debug
// logger.i() — info
// logger.w() — warning
// logger.e() — error
// logger.wtf() — what a terrible failure (критичная ошибка)

3. Debugger (отладчик)

Точки останова (Breakpoints):

void processOrder(Order order) {
  // Кликаем на номер строки в IDE → добавляется точка останова
  print('Processing order: ${order.id}'); // Выполнение остановится здесь
  calculatePrice(order);
  sendOrder(order);
}

Условные точки останова:

// В IDE: правый клик на точку останова → Edit Breakpoint
// Условие: order.price > 1000
void checkOrder(Order order) {
  print('Checking order'); // Остановится только если price > 1000
}

Пошаговое выполнение:

void debug() {
  int x = 5;
  int y = 10;
  int z = x + y; // Step Over — прыгает через строку
  print('Result: $z'); // Step Into — входит внутрь функции
}

4. Hot Reload & Hot Restart

Hot Reload — перезагрузка кода без потери состояния:

# В терминале во время flutter run
flutter run
# Пресс 'r' — Hot Reload
# Пресс 'R' — Hot Restart (полезно для переинициализации)

Кейсы использования:

class StatefulCounter extends StatefulWidget {
  @override
  State<StatefulCounter> createState() => _StatefulCounterState();
}

class _StatefulCounterState extends State<StatefulCounter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'), // Hot Reload обновит текст
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}
// Hot Reload сохранит count = 5 если вы кликали кнопку 5 раз

5. Inspector (анализ виджетов)

DevTools Inspector помогает:

• Выделить виджет на экране
• Посмотреть его properties
• Увидеть его место в дереве

// Коснитесь иконки "Select Widget Mode" в DevTools
// Затем нажимайте на элементы на экране
// DevTools покажет их в виджет-дереве

final debugInspectWidget = inspectWidget(); // Инструмент в коде

// Или в коде:
DebugInspectorWidget(
  child: MyComplexWidget(), // Выделяется на экране зелёной рамкой
);

6. Performance Profiler

Анализ производительности и FPS:

// DevTools → Performance вкладка
// Показывает:
// - Framerate (FPS)
// - CPU/GPU usage
// - Jank (перепады FPS)
// - Длительность операций

// В коде использовать:
import 'dart:developer' as developer;

void slowOperation() {
  final timeline = developer.Timeline.startSync('slowOp');
  
  // Долгая операция
  expensiveComputation();
  
  timeline.finishSync();
}

7. Memory Profiler

Поиск утечек памяти:

# DevTools → Memory вкладка
# Возьмите heap snapshot и проанализируйте использование

Код для проверки утечек:

// Плохо — утечка памяти
class BadExample {
  late StreamSubscription subscription;

  void init() {
    subscription = stream.listen((_) {}); // Никогда не отменяется!
  }

  void dispose() {
    // subscription не отменяется → утечка!
  }
}

// Хорошо — правильное управление ресурсами
class GoodExample {
  late StreamSubscription subscription;

  void init() {
    subscription = stream.listen((_) {});
  }

  void dispose() {
    subscription.cancel(); // Отменяем подписку
  }
}

8. Network Tab (анализ HTTP запросов)

Просмотр всех сетевых запросов:

import 'package:http/http.dart' as http;

// DevTools автоматически ловит http.Client запросы
final response = await http.get(Uri.parse('https://api.example.com/users'));

// В DevTools → Network вкладка видны:
// - URL, method, status code
// - Request/Response headers
// - Request/Response body
// - Время ответа

9. Dart DevTools Extensions

Кастомные расширения для пакетов:

// Если используется пакет с DevTools интеграцией (например Firebase)
// В DevTools автоматически появляется новая вкладка для этого пакета

import 'package:firebase_core/firebase_core.dart';
// DevTools → Firebase вкладка (если установлено расширение)

10. Error Handling & Stack Traces

Визуализация ошибок:

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterError.presentError(details);
    // Или отправить на сервер
    logErrorToServer(details);
  };

  runApp(const MyApp());
}

void exampleError() {
  try {
    int result = 10 ~/ 0; // Ошибка
  } catch (e, stackTrace) {
    // DevTools покажет красную ошибку с полным stack trace
    FlutterError.reportError(FlutterErrorDetails(
      exception: e,
      stack: stackTrace,
      library: 'my_app',
      context: ErrorDescription('Error during computation'),
    ));
  }
}

11. Android Studio / VS Code Debugging

Встроенные возможности:

# Запуск с отладкой
flutter run -v  # Verbose mode

# В Android Studio / VS Code:
# - F5 или Debug → Run
# - Точки останова работают из IDE
# - Variable inspection в боковой панели
# - Watch expressions

12. Crash Analytics (Firebase Crashlytics)

Мониторинг ошибок в production:

import 'package:firebase_crashlytics/firebase_crashlytics.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Pass all uncaught errors to Crashlytics
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;

  // Handle async errors
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack);
    return true;
  };

  runApp(const MyApp());
}

// Логирование события
FirebaseCrashlytics.instance.log('User started checkout');

// Логирование нефатальной ошибки
try {
  riskyOperation();
} catch (e, st) {
  FirebaseCrashlytics.instance.recordError(e, st, fatal: false);
}

Best Practices для дебагинга

• Используйте DevTools Inspector для анализа UI проблем
• Включайте verbose logging в development, но отключайте в production
• Используйте Hot Reload для итеративной разработки
• Профилируйте производительность перед релизом
• Проверяйте утечки памяти с Memory Profiler
• Логируйте сетевые запросы для отладки API проблем
• Используйте try-catch с правильным логированием
• Отправляйте crashes на сервер (Firebase Crashlytics)

Это комплексный набор инструментов делает Flutter одним из лучших фреймворков для мобильной разработки.