Что такое Flutter Inspector и DevTools?

Flutter Inspector и DevTools

Что такое DevTools?

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

Как запустить DevTools?

# Способ 1: Автоматически из IDE
# В VS Code или Android Studio нажмите:
# "Open DevTools in Browser" в статус-баре

# Способ 2: Из командной строки
flutter pub global activate devtools
flutter devtools

# DevTools откроется в браузере на http://localhost:9100

# Способ 3: Подключить к уже запущенному приложению
# После flutter run выполните:
flutter devtools

Inspector (Инспектор виджетов)

Inspector показывает дерево виджетов, их свойства и расположение:

// Если у вас есть такой код:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),
      body: Center(
        child: Column(
          children: [
            Text("Hello"),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text("Press me"),
            ),
          ],
        ),
      ),
    );
  }
}

// Inspector покажет дерево:
// MyApp (StatelessWidget)
// └─ Scaffold
//    ├─ AppBar
//    │  └─ Text("My App")
//    └─ Center
//       └─ Column
//          ├─ Text("Hello")
//          ├─ SizedBox
//          └─ ElevatedButton
//             └─ Text("Press me")

Функции Inspector

1. **Select Widget Mode** — нажать на виджет в приложении
   - Показывает код и свойства
   - Показывает расположение в дереве
   - Показывает размеры и отступы

2. **Show Debug Paint** — раскрасить границы виджетов
   - Видно, как они расположены
   - Полезно для отладки layout

3. **Show Layout Explorer** — подробное отображение layout
   - Все размеры и отступы
   - Flex коэффициенты
   - Constraints

4. **Highlight Repaints** — показать, какие виджеты пересчитываются
   - Помочь найти лишние rebuild
   - Оптимизировать производительность

Performance (Производительность)

Performance таб показывает:

• FPS (кадры в секунду)
• Время на построение виджетов
• Время на рендеринг
• Отправку результата на экран

// Если виджет медленно пересчитывается, вы увидите в Performance:
// Frame: 16.7ms (для 60 FPS)
// Build: 5ms ✓ (быстро)
// Layout: 3ms ✓ (быстро)
// Paint: 2ms ✓ (быстро)
// Rasterize: 2ms ✓ (быстро)
// Jank: нет ✓

// Или проблемные фреймы:
// Frame: 50ms ✗ (медленно! Должно быть < 16.7ms для 60 FPS)
// Build: 30ms ✗ (слишком медленно)
// Layout: 15ms ✗ (слишком медленно)

Memory (Память)

Memory таб показывает:

• Использование памяти (heap size)
• Утечки памяти
• Распределение памяти по объектам

# Для поиска утечек памяти:
1. Откройте Memory tab в DevTools
2. Нажимите "Trigger GC" (сборка мусора)
3. Выполните какое-то действие в приложении
4. Нажимите "Trigger GC" ещё раз
5. Посмотрите, выросла ли память

# Если память выросла — возможна утечка

Logging (Логирование)

Logging таб показывает все логи из приложения:

// Выводить логи
print("Debug message"); // Появится в Logging таб

import "package:flutter/foundation.dart";

if (kDebugMode) {
  print("This message appears only in debug mode");
}

// Можно фильтровать по уровню:
// Info, Warning, Error и т.д.

Network (Сеть)

Network таб показывает все сетевые запросы:

// Все HTTP запросы видны в Network таб
import "package:http/http.dart" as http;

Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse("https://api.example.com/data"),
  );
  // Этот запрос появится в Network таб
}

// Вы увидите:
// - URL запроса
// - Метод (GET, POST, и т.д.)
// - Статус ответа (200, 404, и т.д.)
// - Время ответа
// - Размер ответа
// - Полный текст ответа

Debugger (Отладчик)

Debugger таб позволяет:

• Ставить точки останова (breakpoints)
• Пошагово выполнять код
• Смотреть значения переменных
• Вычислять выражения

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    // Поставьте точку останова на эту строку
    count++; // ← Кликните слева — появится красная точка
    setState(() {});
    
    // Когда нажмёте кнопку, выполнение остановится здесь
    // Вы сможете:
    // - Посмотреть значение count
    // - Пошагово выполнять код (Step Over, Step Into)
    // - Перейти к следующей точке останова (Continue)
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: increment,
      child: Text("Count: $count"),
    );
  }
}

Hot Reload vs Hot Restart

// Hot Reload (Горячая перезагрузка)
// Клавиша: R в flutter run или "Hot Reload" в IDE
flutter run
// После изменения кода, нажмите R
// Код обновится БЕЗ потери состояния

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Original"); // Измените на "Updated"
    // Нажмите R → текст обновится мгновенно
  }
}

// Hot Restart (Перезагрузка приложения)
// Клавиша: Shift+R в flutter run
// Приложение полностью перезагружается
// Состояние теряется

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0; // При Hot Restart вернётся в 0

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Count: $count"),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text("Increment"),
        ),
      ],
    );
  }
}

Tips для отладки

// 1. debugPrint вместо print
import "package:flutter/foundation.dart";

debugPrint("Debug message"); // Лучше для больших сообщений

// 2. debugDumpApp() — вывести дерево виджетов
FlutterError.dumpErrorToConsole(
  FlutterErrorDetails(exception: Exception()), // dummy
);
debugDumpApp(); // Выведет всё дерево приложения

// 3. debugDumpRenderTree() — дерево render объектов
// debugDumpRenderTree();

// 4. Использовать assert() для проверок в debug режиме
assert(
  count >= 0,
  "Count cannot be negative",
); // Только в debug режиме

// 5. kDebugMode — проверка на debug режим
if (kDebugMode) {
  print("Only in debug mode");
}

Keyboard Shortcuts

Flutter Run:
  R — Hot Reload
  Shift+R — Hot Restart
  Q — Quit
  H — Help
  I — Toggle iOS simulator
  A — Toggle Android emulator
  W — Toggle Web
  
DevTools:
  Ctrl+Shift+P (или Cmd+Shift+P на Mac) — Открыть DevTools

Best Practices

• Используйте Inspector для отладки layout
• Смотрите Performance для поиска лишних rebuild
• Используйте Debugger для пошагового выполнения
• Мониторьте Memory для поиска утечек
• Проверяйте Network для отладки API
• Используйте debugPrint вместо print
• Используйте Hot Reload для быстрой разработки

Итог

DevTools — это мощный инструмент для отладки и профилирования. Основные вкладки:

• Inspector — дерево виджетов
• Performance — производительность
• Memory — использование памяти
• Network — сетевые запросы
• Debugger — пошаговое выполнение
• Logging — логи приложения