10.2 Использование отладчика

Когда ваше приложение во время работы ведет себя не так, как ожидается, лучший способ проанализировать и исправить проблему заключается в том, чтобы по очереди зайти в каждое действие процесса и понять, где вычисляются неверные данные или где условие принимает неожиданное значение. Для этого и нужен отладчик.

Активация отладчика

Активация отладчика происходит с помощью добавления параметра debug_mode=true в конце URL при запуске приложения. Если в URL больше нет параметров, то ссылка будет выглядеть как

https://app.bubbleapps.io/index?debug_mode=true , а если есть, то будет

https://app.bubbleapps.io/index?param=value&debug_mode=true . Если вы заходите в приложение кликом на PREVIEW, отладчик автоматически запускается.

Для защиты вашего приложения и труда, отладчик доступен только если вы можете редактировать приложение. Если у вас нет доступа к приложению в редакторе, добавление debug_mode=true ничего не даст.

Обратите внимание, что на данный момент у Bubble нет отладчика для сенсорных устройств. Для доступа в отладчик вам нужно воспользоваться компьютером или ноутбуком.

Когда отладчик будет активирован, вы увидите его в нижней части страницы, с разделами, Отладчиком процессов и Инспектором элементов. Обратите внимание, что отладчик может расширяться и Bubble автоматически добавит место в нижней части страницы. Так происходит только в режиме отладки, а в живой версии этого не будет видно.

Отладка процессов

Левая часть отладчика - отладчик процессов. Здесь можно увидеть 3 кнопки, которые определяют, как будет работать отладчик при запуске процесса. Возможны три режима.

1. "Нормальный"/"normal" режим, в котором процесс работает без прерываний.

2. "Медленный"/"slow" режим, при котором добавляется пауза в одну секунду между каждыми последующими действиями.

3. Режим "Шаг за шагом"/"step-by-step", когда вы управляете ходом исполнения процесса. Этот режим вы будете использовать чаще всего.

При запуске процесса в медленном/пошаговом режиме вы увидите отображение процесса и вычисление полей при каждом действии. Каждое поле в списке параметров, отмеченное голубым, является динамическим (задаваемым в редакторе с помощью конструктора), и клик по нему даст вам понимание, почему значение именно такое. Подробности о вычислении выражений (!!!ЛНК!!!) смотрите ниже.

Ниже приведен пример того, как будет выглядеть процесс, который создает сущность (элемент в списке задач) и затем обновляет поля ввода, в "медленном" режиме. Пример взят из демо-приложения ToDoMVC(!!!ЛНК!!!).При выполнении более чем одного процесса, каждый из них будет запускаться последовательно, и все будут запускаться в одном и том же режиме работы отладчика. Это также применимо к пользовательским процессам, отладчик зайдет внутрь пользовательского процесса, и только после его окончания продолжит выполнение "внешнего" процесса. Статус отладчика сохраняется при обновлении страницы, если процесс переходит на другую страницу или запускает перезагрузку текущей, возобновленный процесс будет запускать последующие действия в том же режиме.

Если по какой-либо причине вам нужно ускорить исполнение процессов, вы можете перейти в режим "Нормальный", благодаря чему остальные действия будут работать с нормальной скоростью.

Добавление контрольных точек

При работе над сложными страницами с большим количеством рабочих процессов, пошаговый режим может быть не лучшим выбором из-за слишком большого количества остановок. Если у вас есть особый процесс, работу которого вы хотели бы изучить, вы можете добавить контрольную точку, которая переключит отладчик в пошаговый режим при запуске этого действия или события. Это настраивается в Редакторе приложения и сохраняется в вашем приложении.

Обратите внимание, что эта настройка будет оказывать какой-либо эффект только когда включен отладчик (когда в URL есть debug_mode=true ) и не повлияет на работу приложения для пользователей.

Обследование элементов

Иногда нужно выяснить, почему элемент отображается именно так, особенно, если вы используете условия или выводите какие-то данные. В отладчике можно выбрать элемент на странице и увидеть список условий, полей и их значений в конкретный момент.

Кликните по кнопке "Обследовать"/"Inspect" для включения Инспектора элемента. Когда Инспектор включен, отладчик расширится и вы сможете выбрать элемент, который нужно обследовать. Выбрать элемент можно либо кликнув по нему (это не запустит связанный с элементом процесс), либо выбрав его в выпадающем меню. Это особенно нужно, когда элемент невиден (для понимания, почему его не видно). Мы можете найти элемент напечатав его имя в поле ввода.Когда элемент выбран справа вы увидите различные свойства и условия и их значения. Также в нижней части инспектора вы сможете видеть список пользовательских состояний (!!!ЛНК!!!) и другие значения, имеющиеся в контексте элементов (например, содержимое группы (!!!ЛНК!!!)). Ниже вы можете увидеть то, как выглядит в отладчике список приложений в Галерее Приложений (!!!ЛНК!!!). Видны различные поля и значения. Когда значение помечено синим, это динамическое выражение, кликнув по которому можно понять, как оно получилось. Подробности смотрите в следующем разделе (!!!ЛНК!!!). При использовании условий отладчик выделит зеленым условия, которые имеют значение "да", а красным - "нет". Здесь также можно узнать, как получилось такое значение, кликнув по выражению (см ниже).

Понимание вычисления выражений

Отладчик может помочь вам понять как вычисляется значение динамического выражения (!!!ЛНК!!!) во время работы. Оценщик в правой части отладчика отображает значение каждой части выражения при клике на неё. Он может отобразить результат поиска по базе данных, результат работы API процедуры и т.д.

Если одно выражение принимает в качестве параметра другое выражение вы можете зайти в каждое выражение по очереди и проанализировать, откуда берутся данные. Если в выражении вы обращаетесь к каким-то элементам, наведение курсора на такой элемент в выражения подсветит элемент на странице.

Также отладчик полезен для отладки ошибок конфиденциальности. Правила конфиденциальности могут привести к сложностям при отладке, так как они могут скрывать некоторые поля или сущности. При клике в оценщике по сущности, скрытой правилами конфиденциальности, появится красное уведомление. Это следующим образом. Сравниваются два значения, значение, видимое текущему пользователю, и голые данные, когда правила конфиденциальности не применяются. Если два объекта отличаются, применяется правило конфиденциальности и показывается уведомление.

Ошибки выполнения

Также в отладчике можно увидеть ошибки выполнения. Например, при совершении запроса по API к сервису, если сервис вернул сообщение с ошибкой из-за отсутствия входного параметра, данная ошибка отобразится. Когда ошибка возникает внутри рабочего процесса или элемента, его иконка становится красной и кликабельной. Кликнув можно увидеть список ошибок.

Когда вы столкнулись с ошибкой, в особенности при использовании сторонних сервисов и плагинов, первое, что нужно сделать - проверить, не является ли это ошибкой выполнения.