Отладка и DevTools во Flutter
В этом разделе будут представлены инструменты отладки Flutter и распространённые приёмы отладки.
Введение в Flutter DevTools
Flutter DevTools — это набор инструментов для отладки и анализа приложений Flutter.
Запуск DevTools
$ flutter run
После запуска приложения в терминале отобразится URL DevTools, обычноhttp://127.0.0.1:9100
Основные команды
| Команда | Описание |
|---|---|
| flutter doctor | Проверка конфигурации среды разработки |
| flutter analyze | Статический анализ кода |
| flutter test | Запустить тесты |
print и debugPrint
Пример: базовый отладочный вывод
// Базовый вывод
print('Привет, отладка'); // Вывод в консоль
// debugPrint предотвращает обрезку длинного текста
debugPrint('Это длинный текст, который можно вывести полностью без обрезки');
// Условный вывод
if (debugMode) {
print('Отладочная информация');
}
// Вывод объекта (требуется toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Информация о пользователе: $user'); // Вывод: Информация о пользователе: {name: John Doe, age: 25}
print('Привет, отладка'); // Вывод в консоль
// debugPrint предотвращает обрезку длинного текста
debugPrint('Это длинный текст, который можно вывести полностью без обрезки');
// Условный вывод
if (debugMode) {
print('Отладочная информация');
}
// Вывод объекта (требуется toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Информация о пользователе: $user'); // Вывод: Информация о пользователе: {name: John Doe, age: 25}
Утверждение - assert
Утверждения используются для проверки условий во время разработки и действуют только в режиме отладки.
< h2 class="example">Пример: использование утверждений
// Простое утверждение
assert(user != null, 'Пользователь не может быть пустым');
// Проверка параметров функции
void setAge(int age) {
// Возраст должен быть больше 0
assert(age > 0, 'Возраст должен быть больше 0');
this.age = age;
}
// Утверждения при построении UI (только для разработки)
Widget build(BuildContext context) {
// Убедиться, что context не null
assert(context != null);
// Убедитесь, что есть родительский Scaffold
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
assert(user != null, 'Пользователь не может быть пустым');
// Проверка параметров функции
void setAge(int age) {
// Возраст должен быть больше 0
assert(age > 0, 'Возраст должен быть больше 0');
this.age = age;
}
// Утверждения при построении UI (только для разработки)
Widget build(BuildContext context) {
// Убедиться, что context не null
assert(context != null);
// Убедитесь, что есть родительский Scaffold
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
Отладка с точками останова
Устанавливайте точки останова в VS Code или Android Studio для отладки.
Отладка в VS Code
- Щёлкните слева от номера строки, чтобы установить точку останова
- Нажмите F5 или щёлкните кнопку отладки, чтобы начать отладку
- Используйте панель инструментов отладки для управления выполнением программы
Основные команды для точек останова
| Действие | Описание |
|---|---|
| Продолжить / F5 | Продолжить выполнение до следующей точки останова |
| Шаг с обходом / F10 | Шаг с обходом, без входа в функции |
| Шаг с заходом / F11 | Шаг с заходом, с входом в функции |
| Шаг с выходом / Shift+F11 | Выйти из текущей функции |
Инспектор Flutter
Инспектор Flutter — часть DevTools, используется для визуализации и проверки дерева виджетов.
Основные возможности
- Дерево виджетов: Просмотр структуры иерархии виджетов
- Обозреватель компоновки: Проверка ограничений компоновки
- Оверлей производительности: Отображение метрик производительности
Отладка типичных проблем
Пример: отладка ситуации, когда UI не обновляется
// Проблема: UI не обновляется
// Причина: setState не был вызван после изменения состояния
// Неправильный пример
void _increment() {
_counter++; // Состояние изменилось, но UI не обновится!
}
// Правильный пример
void _increment() {
setState(() {
_counter++; // Нужно вызвать setState
});
}
// Проблема: управление состоянием запутано
// Рекомендация: используйте Provider или другое решение для управления состоянием
// Причина: setState не был вызван после изменения состояния
// Неправильный пример
void _increment() {
_counter++; // Состояние изменилось, но UI не обновится!
}
// Правильный пример
void _increment() {
setState(() {
_counter++; // Нужно вызвать setState
});
}
// Проблема: управление состоянием запутано
// Рекомендация: используйте Provider или другое решение для управления состоянием
Другие расширенияРаспространённые инструменты для отладки: print для вывода логов, Inspector для проверки дерева Widget, и Timeline для анализа производительности.